All children of a flex container (designated by display: flex
or display: inline-flex
) are automatically made flex items. There is no display property for a flex item; instead, we set it to some other value depending on how we want the children of the flex item to be laid out.
So, if I set display
to X value on Y element (taking into account that the Y participates in a flex context, that is Y is a flex-item) can I be sure that I will always get the flex-item that behaves (in this formatting context, in the flex container) like a block-level element?
(In other words, the Y participates in a block formatting context regardless of whether X=block/inline/table-cell/inline-grid/…etc , right?)
This:
<div id="flex-container" style="display:flex">
<div id="flex-item" style="display: inline;">item</div>
</div>
equals to this (without any side effects)
<div id="flex-container" style="display:flex">
<div id="flex-item" style="display: block;">item</div>
</div>
There is no display property for a flex item; instead, we set it to some other value depending on how we want the children of the flex item to be laid out.
The flex-basis property The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis .
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
The only condition for being a flex item is being an in-flow child of a flex container.
Note this means a contiguous run of text can be wrapped inside an anonymous flex item which do not correspond to any element, and an element child of a flex container might not be a flex item if any of the following
It is absolutely positioned
an absolutely-positioned child of a flex container does not participate in flex layout.
It has display: contents
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
Its children will become the flex items instead (unless something from this list applies to them).
It has display: none
The element and its descendants generates no boxes.
It has box-suppress: discard
The element generates no boxes at all.
It has box-suppress: hide
The element generates boxes as normal, but those boxes do not participate in layout in any way, and must not be displayed.
Previously, if a child of a flex container had a display
value that generated an anonymous parent, that parent became the flex item instead of the child. This changed and now the child becomes the flex item, and no parent is generated.
Apart from that, yes, the display
value should not prevent an element from being a flex item.
Be aware that flex items are blockified, so for example inline-block
becomes block
, inline-table
becomes table
, inline-flex
becomes flex
, etc.
This means that, whatever the specified outer display role, the flex item will always be block-level.
Basically, the display
property, when used on a flex item, is only useful to set its inner display layout model, e.g. that you want the flex item to be a flex container for its contents.
A flex item establishes a new formatting context for its contents. The type of this formatting context is determined by its
display
value, as usual. However, flex items themselves are flex-level boxes, not block-level boxes: they participate in their container’s flex formatting context, not in a block formatting context.
(The terminology differs a bit, the Display spec says a flex item is block-level in the sense of its outer display role, the Flexbox spec says it's not block-level in the sense that the formatting context in which it participates is not a block one)
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