What's the Difference Between Display:Inline-Flex and Display:Flex

What's the difference between display:inline-flex and display:flex?

display: inline-flex does not make flex items display inline. It makes the flex container display inline. That is the only difference between display: inline-flex and display: flex. A similar comparison can be made between display: inline-block and display: block, and pretty much any other display type that has an inline counterpart.¹

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks). You cannot display flex items inline; otherwise you don't actually have a flex layout.

It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inline and/or display: inline-block), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).

¹ _{The differences between block layout and inline layout are outside the scope of this question, but the one that stands out the most is auto width: block-level boxes stretch horizontally to fill their containing block, whereas inline-level boxes shrink to fit their contents. In fact, it is for this reason alone you will almost never use display: inline-flex unless you have a very good reason to display your flex container inline.}

Difference between inline-flex vs inline?

Content within inline will still display how you expect, but content within inline-flex will take on flex behaviour. So adding 2 <div>'s inside of an inline element will create 2 divs below each other, while adding 2 <div>'s inside of an inline-flex element they will display next to each other

hr { margin: 3rem 0 }

.inline,
.inline-flex {
  border: 1px solid black;
  padding: 0.25rem;
}

.inline > *,
.inline-flex > * {
  border: 1px solid red;
  padding: 0.25rem;
}

.inline {
  display: inline;
}
.inline-flex{
  display: inline-flex;
}

<div>
  This is some text at the start the example divs
   
  <div class="inline">
    <div>Inline Child 1</div>
    <div>Inline Child 2</div>
  </div>
   
  This is some text between the example divs
   
  <div class="inline-flex">
    <div>Inline Flex Child 1</div>
    <div>Inline Flex Child 1</div>
  </div>
   
  This is the end of the text around the example divs
</div>

Example of css inline-flex vs. flex

display: flex; causes the flex container to act as display: block; in relation to the rest of the page.

display: inline-flex; causes the flex container to act as display: inline-block; in relation to the rest of the page.

Display:inline-block and display:flex at the same time

Use display: inline-flex instead.

Like so:

<style>
.child {
   display: inline-flex;
}
</style>

It makes the flex container display inline, but preserves the flex layout of it's children.

Parent:Flex vs Child:inline-block or inline (Benefit of using CSS3 flex?)

This question is somewhat off-topic and very broad, I still decided to answer though, as I think it could have an initial value for users who are new to Flexbox

Below is some samples, based on the questions code, that show some of the things Flexbox can do that standard block/inline-block/inline can't (some might with a lot of hacks/tricks).

To dig deeper, here is a good article: A Complete Guide to Flexbox

Properties for the flex container (has the display: flex;)

The justify-content property, defaults to flex-start

div {  background: blue;  display: flex;  justify-content: space-around;   /*  distribute the remaining space around each item  */}
p {  background: yellow;  margin: 5px;  padding: 5px;}

<div>  <p>This is P1</p>  <p>This is P2</p>  <p>This is P3</p></div>

Difference between flex display property and block display property

At first glance they look similar, but they are not...
The key is that display: flex has access to the flexbox model feature. To check this in action, you can add to .flex class selector two properties: align-items: center; and justify-content: center;

display block "The element generates a block element box, generating line breaks both before and after the element when in the normal flow." MDN
display flex "The element behaves like a block element and lays out its content according to the flexbox model." MDN

Purpose: making div inline. Should display be Inline-Flex or Inline-block

If all you want to do is display a run of text inline with other text, use display: inline. (This is where a span should be used over a div, but you have your limitations...)

If you want to display a block of text inline, but still have its text flow independently within the block as though it were still a block-level element, use display: inline-block.

You won't see any difference between inline-block and inline-flex if the only thing in your div is a single run of text, because the text in an inline flex container is converted into a block box anyway, but inline-block is the idiomatic way of formatting inline content as an atomic box — inline-flex is intended for when you're actually trying to create a flex layout.

If you're trying to format a Web form with each label on the same row as its field, consider table layout, floats, or a complete flex layout instead of just displaying each label as an individual flex container.

What's the Difference Between Display:Inline-Flex and Display:Flex