Display: Flex; clarification

HTML-CSS
#1

Hi all,

Just looking for a quick clarification, I’m currently working on the Product Spec page and I’m trying to build my nav-bar, but getting the placement of the 3 links to the right of the logo is sending me into a spiral.

Can I just clarify that display: flex is applied to every item that falls within the parent container.

For example:

<header> (parent container) <-- display flex appled here

<img> (flex item)

<nav> Preformatted text(flex item)

  • <ul> (child to <nav>) // is display:flex applied to this element?
    • <li> (child to <ul>) // is display:flex applied to this element?

Cheers

#2

So if header is your flex box, then only direct children of header are captured by that flex. If you have an img and a nav contained within that, then those two items are flexing.

You can display flex on the ul as well, which would make each of its li tags direct children.

There’s actually a GREAT discussion on this very topic on StackOverflow. By the spec, flex applies only to direct child nodes.

1 Like
#3

Thank you for the clarification snowmonkey.

#4

Glad I could help. It was a great question, and by researching it, I learned a little more about the mechanicals of flex. So thanks for the opportunity! :wink:

#5