显示：inline-flex和display：flex之间的区别 [英] Difference between display:inline-flex and display:flex
问题描述
我很难理解属性 display：inline-flex; 。
display：inline-flex; 和 display：flex; ？ >
我试图垂直对齐ID包装中的一些元素。这就是为什么我给属性 display：inline-flex; 到这个ID;因为ID包装器是flex容器。
但是介绍没有区别。我预计包装器ID中的所有内容都将显示 inline
#wrapper { display：inline-flex; / *显示没有区别：flex; * /}
< body& < div id =wrapper> < header> header< / header> < nav> nav< / nav> < aside> aside< / aside> < main> main< / main> < footer> footer< / footer> < / div>< / body>
有什么区别？
display：inline-flex 不会使内容显示inline。它使 flex容器显示为内联。这是 display：inline-flex 和 display：flex 之间的唯一区别。可以在 display：inline-block 和 display：block 之间进行类似的比较，并且几乎任何其他具有内联对应的显示类型。
对flex项目的影响绝对没有区别; flex布局是相同的，不管flex容器是块级还是内联级。特别地，flex项本身总是表现为块级框（虽然它们具有一些inline-blocks的属性）。您不能内联显示flex项目;否则你实际上没有flex布局。不清楚垂直对齐是什么意思，或者为什么要在内联中显示内容，但我怀疑flexbox不是您想要完成的任何工具。
I have difficulty understanding the property display:inline-flex;.
What is the difference between display:inline-flex; and display:flex;?
I am trying to vertically align some elements within the ID wrapper. That's why I gave the property display:inline-flex; to this ID; because 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.
#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>
What is the difference?
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.
这篇关于显示：inline-flex和display：flex之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
