inline-flex

[oldoc63]

inline-flex

In the previous exercise, you might have observed that when we gave a div — a block level element — the display value of flex that it remained a block level element. What if we want multiple flex containers to display inline with each other?

If we didn’t want div elements to be block-level elements, we would use display: inline. Flexbox, however, provides the inline-flex value for the display property, which allows us to create flex containers that are also inline elements.

[oldoc63]

• In the example above, there are two container divs. Without a width, each div would stretch the entire width of the page. The paragraphs within each div would also display on top of each other because paragraphs are block-level elements.

• When we change the value of the display property to inline-flex, the divs will display inline with each other if the page is wide enough.

[oldoc63]

• Currently, the size of the parent container will override the size of its child elements.