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

by

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)

More Related Contents:

  1. How to create one vertical column in between rows in Flexbox [closed]
  2. Why is a flex item limited to parent size?
  3. Fill remaining vertical space with CSS using display:flex
  4. How does flex-wrap work with align-self, align-items and align-content?
  5. Flex-box: Align last row to grid
  6. Text in a flex container doesn’t wrap in IE11
  7. Equal height rows in CSS Grid Layout
  8. How to make flexbox items the same size?
  9. Align 3 unequal blocks left, center and right
  10. How can I align one item right with flexbox?
  11. My position: sticky element isn’t sticky when using flexbox
  12. What do “flex” and “justify-content” achieve that “text-align” doesn’t?
  13. Every item to have the same width as the widest element [duplicate]
  14. How can I make a div span multiple rows and columns in a grid?
  15. Flexible box model – display : flex, box, flexbox? [duplicate]
  16. Usage of display property of flex box items
  17. firefox overflow-y not working with nested flexbox
  18. Removing display:flex adds spaces around a link. Why?
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. How to specify an element after which to wrap in css flexbox? [duplicate]
  22. CSS3 Flexbox: display: box vs. flexbox vs. flex
  23. Flex auto margin not working in IE10/11
  24. Create a row of flexbox items with a max height defined by one child [duplicate]
  25. Prevent flex items from overflowing a container
  26. How can I create multi columns from a single unordered list?
  27. Can flex items wrap in a container with dynamic height?
  28. How to fix unexpected column order in bootstrap 4?
  29. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  30. Horizontal masonry layout with flexbox CSS only [duplicate]

Leave a Comment