Flexbox - inline-flex

Screen Shot 2020-05-27 at 11.21.57 am

Would somebody please be able to help me understand why ‘‘inline-flex’’ is declared on the items instead of the container?

Thanks in advance! :relaxed:

Hello @core9017156070 and welcome to the forums :grinning:

If you declare inline-flex on the container instead of the items, than it will effect anything with a class of container. As such all of the containers will be stacked accordingly.

They want items inside the container to be stacked instead of the containers to be stacked.

Try visualizing the class="container" as two chests, and the class="child" as blocks inside the chests.

If we declare display: inline-flex; on the container than the two chests will be effected, but their contents will not change.
If we declare display: inline-flex; on the child than the items inside the chest will be effected.

You can see this effect by changing your code and testing it.

Thanks do much for your help! I am still a bit confused :nerd_face:.

-I can’t wrap my head around imagining one container as TWO chests?
-what do you mean by stack? like side by side, which is what inline is supposed to do, or top and bottom?

This is what happens if I try to type it up :thinking:, the two child elements (blue border) are not going inline?

also, if i change the child elements’ width to 500px each, their blue borders just expand beyond the parent container (red border)? I thought the child items are meant to shrink to fit inside the parent? (the child elements do shrink though if I put display: inline-flex in the parent, .container?).

Sorry for all the questions!! I really appreciate your help! :innocent:.

Sorry for not being clearer, take this code:

<div class="container">
    <div class="child">
        <h1>1</h1>
        <h1>2</h1>
    </div>
</div>

<div class="container">
    <div class="child">
        <h1>1</h1>
        <h1>2</h1>
    </div>
</div>

If you call inline-flex on container, than anything with the name container will be stacked according to inline-flex, which is all good if you are wanting to modify multiple elements with the class of container.
However you are trying to modify the elements with a class of child

I recommend reading the documentation for this display value. I actually just reviewed this and its behavior is different compared to what I previously thought:

I believe that the visual of an element can expand past the border of its parent, however other elements will ignore its presence and they may overlap. I could be wrong about this though, I will test it when I get the chance and let you know.

No need to apologize, I will do what I can to help.

1 Like

It seems this is the case, as the elements will overlap each other, when their parents border each other but the child element’s width goes farther than the parent.