Menu
I see the following news item on MDN CSS homepage:
Gecko's support of flexible boxes has been adapted to match a recent specification clarification: from Firefox 23
::beforeand::afterwill be flex items, and as such can be repositioned usingorderandalign-self.
(May 3rd, 2013)
What specification does it refer to?
I cannot find any references to ::before/::after in CSS Flexible Box Layout Module.
758
To start with flexbox firstly create a flex container. To create a flex container set the display property to flex. flex-direction: The flex-direction is used to define the direction of flexible item. The default axis is horizontal in flexbox, so the items flow into a row.
Nested flex boxes It is possible to create some pretty complex layouts with flexbox. It is perfectly ok to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes. Have a look at complex-flexbox.html (see it live also).
Why Flexbox? For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating.
flex-direction: The flex-direction is used to define the direction of flexible item. The default axis is horizontal in flexbox, so the items flow into a row.
This was implemented in bug 867454. Not implementing it was a mistake, as comment #0 tells.
The spec says:
The contents of a flex container consists of zero or more flex items: each in-flow child of a flex container becomes a flex item, and each contiguous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item.
And that does include ::before/::after pseudo elements (at least the mozilla folks interpret it this way now, and I'd concur).
"Firefox 23 for developers" also features this information, explicitly referring to ::before and ::after as "in-flow".
In-flow ::after and ::before pseudo-elements are now flex items (bug 867454).
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
