What is the difference between displayinline flex and displayflex

display: flex and display: inline-flex are two display modes in CSS that utilize the Flexible Box Layout module, commonly known as Flexbox. Flexbox is a one-dimensional layout method that provides a more flexible approach to arranging elements within the box model.

display: flex

When you set the display: flex property on an element, it becomes a block-level flex container, meaning the element behaves as a block-level element. Specifically:

• Block-level element characteristics: Similar to elements with display: block, display: flex elements occupy a full line on the page, with line breaks before and after.
• Flex container: Direct child elements become flex items and are arranged according to the flex model, no longer following the default block or inline flow.
• Layout control: For child elements, you can use Flexbox properties to control alignment, direction, order, and sizing, such as justify-content, align-items, flex-direction, order, and flex-grow.

Example: For instance, if you have a navigation bar or a column of cards, you might want them to fill the entire container width and flexibly resize for different screen sizes, making display: flex a suitable choice.

display: inline-flex

When you use display: inline-flex, the element becomes a flex container but behaves as an inline-level container. This means:

• Inline-level element characteristics: display: inline-flex elements flow within the text line like display: inline elements, without occupying a full line, unless space is insufficient.
• Flex container: Internal child elements behave similarly to display: flex, becoming flex items and arranged according to Flexbox properties.
• Arrangement characteristics: Although the element appears as an inline-level element externally, its internal child elements are arranged within a complete Flexbox layout environment.

Here, display: inline-flex is ideal when you need a content block to appear as an inline element within the text flow while using Flexbox to arrange its internal elements. For example, a small toolbar or button group might use display: inline-flex.

Summary

In summary, the primary distinction lies in the external layout behavior: display: flex makes the element act as a block-level element, while display: inline-flex makes it act as an inline-level element. The choice depends on how you position your flex container and its internal elements within the page flow.

Both flex and inline-flex apply the flexbox layout to the container's children. The container using display: flex behaves like a block-level element, whereas the container using display: inline-flex behaves like an inline element.

display: inline-flex does not cause flex items to display inline; it causes the flex container to display inline. This is the only difference between display: inline-flex and display: flex. You can draw a similar comparison between display: inline-block and display: block, as well as almost any other display property with an inline counterpart. 1

There is absolutely no difference in how flex items are affected; regardless of whether the flex container is block-level or inline-level, the flex layout remains the same. Specifically, flex items themselves always behave like block-level boxes (although they do have some properties of inline-block). You cannot embed flex items inline; otherwise, you don't actually have a flex layout.

It's unclear what 'vertical alignment' means or why you want to display content inline, but I suspect Flexbox is not the correct tool for any task you're trying to accomplish. It's likely that you're looking for a simple, old-fashioned inline layout (display: inline and/or display: inline-block), and Flexbox cannot replace it; Flexbox is not the universal layout solution that everyone claims it is (I say this because this misunderstanding might be why you first considered Flexbox).

1 The differences between block and inline layouts are beyond the scope of this question, but the most prominent is automatic width: block-level boxes stretch horizontally to fill their containing block, while inline-level boxes shrink to fit their containing block content. In fact, for this reason alone, you will almost never use display: inline-flex unless you have a compelling reason to display the flex container inline.