Are flex items block level element?

by

Both specifications are, of course, correct, but you forget the keyword display in the second section. Each element has a display value and for flex items this value is block which means that if, for example, you specify inline-block it will get computed to block. If you specify inline-grid, it will get computed to grid and so on.

if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent

So flex items are flex-level boxes with a display: block; value but they aren’t block-level boxes.

Related: Usage of display property of flex box items

To make it easier, imagine you have two worlds, the outside world and the inside world. If we look at a flex item from the outside world, it’s a flex-level box participating in its container’s flex formatting context. From the inside world, it’s a block element which means that an element inside a flex item will see the flex item as a block element.

If you set inline-[flex/table/grid/block] to the flex item it will be seen as a [flex/table/grid/block] container from the inside. The inline is gone because it’s blockified.

More Related Contents:

  1. Make a div span two rows in a grid
  2. Fill remaining vertical space with CSS using display:flex
  3. Text in a flex container doesn’t wrap in IE11
  4. Better way to set distance between flexbox items
  5. What’s the difference between align-content and align-items?
  6. How does flex-shrink factor in padding and border-box?
  7. Areas covered by Flexbox which are difficult or impossible to achieve with Grid
  8. How can I align one item right with flexbox?
  9. What does flex: 1 mean?
  10. Margin collapsing in flexbox
  11. How to change flexbox wrap?
  12. Create a Masonry grid with flexbox (or other CSS)
  13. css grid of squares with flexbox
  14. Set flexbox children to have different heights to use up available space
  15. Flexible box model – display : flex, box, flexbox? [duplicate]
  16. Prevent flex item from exceeding parent height and make scroll bar work
  17. Bootstrap change order of columns
  18. How to specify an element after which to wrap in css flexbox? [duplicate]
  19. Flex auto margin not working in IE10/11
  20. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  21. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  22. The difference between flex:1 and flex-grow:1
  23. How to control number of items per row using media queries in Flexbox?
  24. Vertically center items with flexbox
  25. How to fix unexpected column order in bootstrap 4?
  26. How to stretch children to fill cross-axis?
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Do I not understand the flex-grow property?
  29. Row Wrap in flex-box not wrapping in Safari
  30. What exactly flex-basis property sets?

Leave a Comment