display:inline-flex 和 display:flex 有什么区别? [英] What's the difference between display:inline-flex and display:flex?
问题描述
我正在尝试垂直对齐 ID 包装器中的元素.我将属性 display:inline-flex; 赋予此 ID，因为 ID 包装器是 flex 容器.
但是在展示上没有区别.我希望包装器 ID 中的所有内容都将显示为 inline.为什么不是?
#wrapper {显示:inline-flex；/* 与 display:flex 没有区别；*/}<div id="包装器"><header>header</header><nav>nav</nav><旁白>旁白</旁白><main>main</main><footer>footer</footer>display: inline-flex 不会使 flex items 内联显示.它使 flex 容器 内联显示.这是 display: inline-flex 和 display: flex 之间的唯一区别.display: inline-block 和 display: block 和 几乎任何具有内联对应物的其他显示类型.1
对弹性项目的效果绝对没有区别；无论 flex 容器是块级还是内联级，flex 布局都是相同的.特别是，弹性项目本身总是表现得像块级框(尽管它们确实具有内联块的一些属性).您不能内联显示 flex 项目；否则你实际上没有弹性布局.
目前尚不清楚垂直对齐"究竟是什么意思，或者为什么要内联显示内容，但我怀疑 flexbox 不是您想要完成的任何工具的正确工具.很有可能您正在寻找的只是普通的旧内联布局(display: inline 和/或 display: inline-block)，而 flexbox 不是 替换；flexbox 不是每个人都声称的通用布局解决方案(我这么说是因为误解可能是您首先考虑使用 flexbox 的原因).
1 块布局和内联布局之间的区别不在本问题的范围内，但最突出的是自动宽度:块级框水平拉伸以填充它们的包含块，而行内级别的框会缩小以适应其内容.事实上，仅仅因为这个原因你几乎不会使用 display: inline-flex 除非你有很好的理由内联显示你的 flex 容器.
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>
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).
1 The 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.
这篇关于display:inline-flex 和 display:flex 有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
