Does the CSS flexbox module work on direct child elements only?

Question

Have a look at this page design of a site I own and run:

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

As you can see, this concerns a classi

Answer 1

BoltClock's answer is great but I want to add an important note:

It's the (direct) children boxes of the flex container which become flex items. But those don't necessarily correspond to (direct) children elements.

Some examples:

• The ::before and ::after pseudo-elements of the flex container generate flex items.
• Each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.
• If a child element of a flex container has display: contents, it won't be rendered, and its children (grandchildren of the flex container) will be displayed as flex items.

Then, if you have a complex structure inside the flex container, and you want the leaves of the tree to be flex items of the outer container, you can style all intermediate elements with display: contents.

However, note display: contents is a recent addition, so it's not widely supported yet.