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

To answer your question title: yes, this is actually stated quite clearly in the spec:

The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item

In case the wording in the spec confuses you, that's because your wording is a bit off:

They are childs but not direct childs.

A child is direct by definition... the inner divs are called descendants, but not children in that they're not directly nested within the flex container.

Now, anything with display: flex or display: inline-flex is designated a flex container. While each flex item participates in the flex container's formatting context, the flex item's descendants are formatted independently and regardless of the flex container, being the same as if the container was never flexed in the first place.

As such, you can't reorder descendants of flex items, except if the flex item itself is also made a flex container for its descendants, but even then you cannot reorder them beyond this inner container and around the container's siblings with respect to the outer container.

Answer 2

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.

Answer 3

Some potential solutions will be the CSS Grid layout: http://dev.w3.org/csswg/css3-grid-layout/ however at the time of writing only IE10 supports it: http://caniuse.com/css-grid

and template layout http://www.w3.org/TR/2009/WD-css3-layout-20090402/

Not sure if either are being developed though, or if we'll have another flex-box type thing with lots of similar but changing syntaxes