Difference between inline-flex vs inline?

June 2, 2022

Regarding Outline style is not getting applied when heading is used inside anchor

Here in the above question, outline-style works for heading inside anchor only when the display is inline-flex | inline-block | block

I understand the difference between the following

inline-block: Create specific block for each element under its section maintain the structure of each element.

inline-flex: Does not reserved any specific space in normal form.

But what is the difference between inline and inline-flex?

>Solution :

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
  &nbsp;
  <div class="inline">
    <div>Inline Child 1</div>
    <div>Inline Child 2</div>
  </div>
  &nbsp;
  This is some text between the example divs
  &nbsp;
  <div class="inline-flex">
    <div>Inline Flex Child 1</div>
    <div>Inline Flex Child 1</div>
  </div>
  &nbsp;
  This is the end of the text around the example divs
</div>