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

Question

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

Answer

Much like the difference between display: block; and display: inline;, the main difference between display: flex; and display: inline-flex; is that display: inline-flex; will make the flex container an inline element while its content maintains its flexbox properties.

4 Likes

isn’t it rather more like inline-block than just inline?

4 Likes

If inline is for regular elements, and inline-flex is for flex items, is that the only difference between inline and inline-flex or are there more differences? If so, what are they?

Please i need help. am a little confused here… display : flex is supposed to make the container a block element but it appeared inline instead ? please why …

3 Likes

i had this also… it confused me a bit.

In the attached screenshot, container is still block level after having display: flex property but the child elements are inline. I hope it is cleared now.

5 Likes

I understand your problem. Look
** When we declare display: flex; on an element then some default styles that get applied to that element :**
And in your case it’s (flex-direction: row;)
which sets the flex-item inside the flex container in a row.
Your container is still a block level element.
change the default value to column and see results. hope this will help.

6 Likes

Yes, I was thinking the same thing. Not only will elements with a display property of inline-flex appear on the same line as inline/inline-block/inline-flex elements, but its dimensions are modifiable (like inline-block elements)

Other than inline-flex elements being flex containers, inline-flex elements also have modifiable dimentions (much like inline-block)

:slightly_smiling_face:
Display: flex;, takes the full width of its parent container, sets the element as Block Level Flex.
Unlike, display: inline-flex; which only takes the required space for the content, sets the element as inline-flex;.

:eight_pointed_black_star: :eight_pointed_black_star: Good Night, Everyone :exclamation: :eight_pointed_black_star: :eight_pointed_black_star:

7 Likes

Hello! Is there anybody who saw this and got a bit confused:

In the example above, the .child divs(it was 150px declared Idk why it says 300px) will take up more width (300 pixels) than the container div allows (200 pixels)

thanks!

1 Like

hey! this is an incredibly late response, so I’m not sure if you have already figured it out yet, but in the example in this lesson, there are two .child divs (both 150px in width) making the total width of both .child divs 300px. :slight_smile:

3 Likes

Hi everyone! Why does the boxes appear justified to the left and once we set display inline-flex they will assume their position on the center?

1 Like

Thank you for answering! I had the same question as duro :nerd_face:

this is a pretty good explanation!

Not a pro here but here’s my understanding, do correct me if it doesn’t align with your understanding.

I am trying to understand from real life application perspective, imagine that this is a customer review section, the design on desktop was first customer profile photo at the left, then his review; while customer 2 profile photo is at the right.

However by default html reads from left to right, top to bottom, hence when in mobile view the review of second customer will come up first, then follow by the profile photo. so flex enable you to adjust the sequence.

to reply on the question, different between flex and inline-flex maybe can be understand as you want the customer review to be appear as one below another, or you want to make it next to each other (like on some website you can swipe right to view more review?)

Do correct me if i am wrong as we are all learning together too.

I think it’s because 2 block level elements won’t share the same line (they won’t sit next to each other); display: flex works like a block level element. Changing it from display: flex (block level) to display: inline-flex (which works like inline-block) changes that behavior from not allowing the divs to sit next to each other, to allowing all of them to sit next to each other in a row (in a line/sharing the same line).