display：inline-flex和display：flex之间有什么区别？
我试图垂直对齐ID包装器中的元素。我将属性display:inline-flex;赋予此ID，因为ID包装器是flex容器。
但是演示文稿没有区别。我希望能够显示包装器ID中的所有内容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>
MMTTMM浏览 4027回答 3
3回答
-
吃鸡游戏
display: inline-flex不会使弹性项目内联显示。它使Flex容器显示为内联。这是display: inline-flex和之间唯一的区别display: flex。可以在display: inline-block和之间进行类似的比较display: block，并且几乎任何其他具有内联对应的显示类型。1对柔性物品的影响绝对没有区别; 无论Flex容器是块级还是内联级，flex布局都是相同的。特别是，flex项本身总是表现得像块级框（尽管它们确实具有内联块的一些属性）。您无法内联显示弹性项目; 否则你实际上没有flex布局。目前尚不清楚“垂直对齐”究竟是什么意思，或者为什么你想要内联显示内容，但我怀疑flexbox不是你想要完成的任何工具。您正在寻找的机会只是简单的旧内联布局（display: inline和/或display: inline-block），Flexbox 不是替代品; flexbox 不是每个人都声称的通用布局解决方案（我说这是因为误解可能就是为什么你首先考虑使用flexbox）。1 块布局和内联布局之间的差异超出了这个问题的范围，但最突出的是自动宽度：块级框水平拉伸以填充其包含块，而内联级框缩小以适应它们的内容。事实上，仅仅因为这个原因你几乎不会使用，display: inline-flex除非你有充分的理由在内联显示你的flex容器。 -
长风秋雁
flex并且inline-flex都将flex布局应用于容器的子项。容器的display:flex行为类似于块级元素本身，同时display:inline-flex使容器的行为类似于内联元素。 -
大话西游666
好吧，我知道起初可能有点混乱，但是display在谈论父元素，所以当我们说：display: flex;这是关于元素，当我们说display:inline-flex;，也是在制作元素本身inline......这就像制作div 内联或块，运行下面的代码片段，你可以看到如何display flex分解到下一行：.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>
随时随地看视频慕课网APP
Html/CSS
CSS3