Flexbox - What does the display: flex; command influence

I’m having trouble understanding flexbox and what it targets.

i.e presume I have the following html code

<header>
    <ul class="navBar">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</header>

In CSS to make home and about line up like a navigation bar (on the top, right side) would the correct thing to do be to set the header as a flex box or should I set the list items as inline-flex boxes, or set the unordered list as a flexbox etc. I’m finding it hard to understand what the display: flex; element targets like does it only target its direct children or everything under it…

display: flex is assigned to the parent. Its children will then be affected.

But why use flex for a horizontal navbar if you can style your li to be display: inline :wink:

More info on flex:

An awesome game to learn about the different flex rules:

1 Like

Ohh… Yeah that’s way easier :slight_smile:

However, then when is the right time to use flexbox? When I can replace a lot of it’s benefits with properties such as margin, padding etc.

Well flex has many more possibilities when it comes to ordering the content, as it

  • can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
  • can have display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
  • can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
  • can “flex” their sizes to respond to the available space
  • can be aligned with respect to their container or each other
  • can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size.
1 Like

Okay! Thank you for the help :smiley:

1 Like

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