Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)

Tags:

css

flexbox

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?)

  • X – non-block value
  • Y – flex-item, html element

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>
like image 920
ieXcept Avatar asked Sep 01 '16 02:09

ieXcept


People also ask

What is the display value of 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.

What property and value are used to display flex items in a column?

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 .

When using flexbox layout the flex property does what?

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.


1 Answers

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)

like image 114
Oriol Avatar answered Oct 05 '22 13:10

Oriol