Usage of display property of flex box items

by

From the specifciation:

The display value of a flex item is blockified: 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. (See CSS2.1§9.7 [CSS21] and CSS Display [CSS3-DISPLAY] for details on this type of display value conversion.)

So basically, setting inline-block or block will do nothing as both will get computed to block but you can set table or inline-table and your flex item will behave as a table. Same thing if you set inline-grid or grid

.box {
  display: flex;
  margin:5px;
}

.box>div {
  height: 50px;
  width: 100%;
  background: red;
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

span {
  border: 2px solid green;
}
<div class="box">
  <div>
    <span></span>

    <span></span>
  </div>
</div>

<div class="box">
  <div style="display:inline-grid;">
    <span></span>

    <span></span>
  </div>
</div>

For the second case you can see it computes to grid

enter image description here

More Related Contents:

  1. Make a div span two rows in a grid
  2. Bootstrap align navbar items to the right
  3. Aligning grid items across the entire row/column (like flex items can)
  4. What’s the difference between align-content and align-items?
  5. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  6. How can I make Flexbox children 100% height of their parent?
  7. Bootstrap 4 navbar with 2 rows
  8. What’s the difference between display:inline-flex and display:flex?
  9. Scrolling a flexbox with overflowing content
  10. A grid layout with responsive squares
  11. Bootstrap 4 masonry layout utilizing flexbox grid
  12. How to change flexbox wrap?
  13. Create a Masonry grid with flexbox (or other CSS)
  14. css grid of squares with flexbox
  15. CSS flexbox not working in IE10
  16. Set flexbox children to have different heights to use up available space
  17. Height 100% on flexbox column child [duplicate]
  18. Prevent flex item from exceeding parent height and make scroll bar work
  19. Are flex items block level element?
  20. Bootstrap change order of columns
  21. text-overflow ellipsis on flex child not working [duplicate]
  22. What are allowed values of the `display` property for a flex-item? (layout of flex-item’s children is irrelevant)
  23. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  24. How can I change the order of Bootstrap columns?
  25. The difference between flex:1 and flex-grow:1
  26. How do I set distance between flexbox items?
  27. Difference between flex-end and end? [duplicate]
  28. How to control number of items per row using media queries in Flexbox?
  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