Menu
I am trying to vertically align elements within an ID wrapper. I gave the property display:inline-flex; to this ID as the ID wrapper is the flex container.
But there is no difference in presentation. I expected that everything in the wrapper ID would be displayed inline. Why isn't it?
#wrapper { display: inline-flex; /*no difference to display:flex; */ }<body> <div id="wrapper"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> </body>
336
flex and inline-flex both apply flex layout to children of the container. Container with display:flex behaves like a block-level element itself, while display:inline-flex makes the container behaves like an inline element. Follow this answer to receive notifications.
Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values. inline-flex. Displays an element as an inline-level flex container.
The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.
Example 2: display: inline-flexThree containers in this color with display: inline-flex , containing three child divs in this color with flex: 1 and min-width: 50px . Each parent container sits next to the other one, since they can all fit on the same row.
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.1
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).
1The 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.
138
OK, I know at first might be a bit confusing, but display is talking about the parent element, so means when we say: display: flex;, it's about the element and when we say display:inline-flex;, is also making the element itself inline...
It's like make a div inline or block, run the snippet below and you can see how display flex breaks down to next line:
.inline-flex { display: inline-flex; } .flex { display: flex; } p { color: red; }<body> <p>Display Inline Flex</p> <div class="inline-flex"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> <div class="inline-flex"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> <p>Display Flex</p> <div class="flex"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> <div class="flex"> <header>header</header> <nav>nav</nav> <aside>aside</aside> <main>main</main> <footer>footer</footer> </div> </body>Also quickly create the image below to show the difference at a glance:
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
