Difference between inline-flex vs inline?

Question

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

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

I understand the difference between the following:

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

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

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

Answer 1

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>