显示: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
em>显示内联。它使 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屋!