Am I right to say that Flex puts block elements into their own cell?

This confused me for ages but now I just seem to be finally getting to grips with it. I couldn’t figure out how flex determines what goes into one cell and what goes into another, so for ages I thought that I had to go through every item and put “display: flex;” to make it have its own cell.

It was only when I was reading a tutorial and they were separating items with <div> to put them into cells. I remembered that divs are block-level. So I thought about that, and then tried making a div with a <h1> and a <p> inside, only putting “display: flex;” for the div and not the others, and as expected both elements got their own cell.

So I guess I’m correct unless there’s something that I’m missing?

Yes, that is basically correct, but it’s any element, block or inline or whatever. If you apply display:flex to an element, its direct children will be flex elements.

1 Like

Ahh right that makes sense. So by direct children, that means its grandchildren won’t get their own cell, they’ll just go in their parent’s cell, right?

So that if I wrote the following, there would be 3 cells each with a <h1> and a <p>:

<div class="flex-container">
    <div class="flex-cell">
        <h1>Title 1</h1>
        <p>Paragraph 1</p>
    </div>
    <div class="flex-cell">
        <h1>Title 2</h1>
        <p>Paragraph 2</p>
    </div>
    <div class="flex-cell">
        <h1>Title 3</h1>
        <p>Paragraph 3</p>
    </div>
</div>

EDIT: I just tried it out and that does seem to be the case:
https://codepen.io/lvl-6/pen/dyWKrGb

you might also wanna look things from different perspective and check this topic
The display: flex property has a wide impact on the children of the given element. In most cases, those children loose the effect of their own display property and they are treated as flex items, where big part of their behavior is determined by additional general flex properties on their parent(the owner of the dispay: flex)(properties like justify-content, flex-direction, flex-flow etc) and their own flex-specific properties(flex-basis, align-self, order etc). This is a good general guide on flexbox and its properties. With this being said, you could use a <div> as flex item, or a <span>, which have different display and behavior by default, but once made flex-items, adopt similar behaviors(ones of flex items, instead of a block which covers the width of a page, or an inline element which has no width and height, but takes enough to place its contents). Also, if your flex item contain more elements on its own, which you also want to align more fancy, you could make that flex item also with display: flex(by that moment it would have just been a flex-item, but now it would also be a flex-parent, in order to arrange its own children “flexibly”).
In some cases you would want to actually place a content in an element(for example div) and then place it inside the flex item div, so it doesnt behave as flex item and is not directly impacted by the flex item properties, such is the case with your <h1> and <p> tags.
For example:

<div class="flex-container">
    <div class="flex-item">
        <div>my content</div>  //regular element
    </div>
</div>
1 Like

Thanks, this is helpful. I did notice in one of my FCC projects when I put something in a flex container and it suddenly lost its alignment, so this explains that.

I’ve actually been on that css-tricks page before too, but that was back when this was frying my brain and I wasn’t really taking it in anymore. I’m glad I finally understand this, now I can lay out everything the way I want without issue :smiley:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.