I’m having trouble understanding flexbox and what it targets.
i.e presume I have the following html code
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
More info on flex:
An awesome game to learn about the different flex rules:
Ohh… Yeah that’s way easier
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.
Okay! Thank you for the help
This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.