Flex items are blockified. What that means?
There is an important feature when we use flexbox. When you write display: flex for the element all childs (flex items) are blockified. What does it mean?🤔
All flex items that are set the display property with the inline, inline-block, inline-flex, inline-grid or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.
So if you write display: block, display: inline or display: inline-block you do unnecessary work. Browsers do that itself ☝️
don't do that
<div class="grid">
<div class="item">some content</div>
<div class="item">some content</div>
</div>
.grid {
display: flex;
}
.item {
display: block; /* or display: inline or display: inline-block */
}
you can use this instead
<div class="grid">
<div class="item">some content</div>
<div class="item">some content</div>
</div>
.grid {
display: flex;
}
Note! Check it using the Live cheatsheet. Please, choose the display: flex tab and you'll find the example.