显示之间的区别：内联flex和显示：flex
我很难理解属性display:inline-flex; 。 display:inline-flex;什么区别display:inline-flex; 并display:flex; ？
我想垂直alignmentID包装中的一些元素。 这就是为什么我给了属性display:inline-flex; 到这个ID; 因为ID包装是柔性容器。
但是介绍没有区别。 我期望包装器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>
JSFiddle示例
有什么不同？
display: inline-flex不会使flex项目内联显示。 它使内联flex容器显示。 这是display: inline-flex之间的唯一区别display: inline-flex和display: flex 。 可以在display: inline-block和display: block之间进行类似的比较，以及几乎任何其他具有内联对应的显示types 。
对弹性项目的影响绝对没有差别; 柔性布局是相同的，无论柔性容器是块级还是内联级。 特别是，flex项目本身的行为总是像块级别的框（尽pipe它们具有内联块的一些属性）。 您不能内联显示弹性项目; 否则你实际上没有一个灵活的布局。 目前尚不清楚“垂直alignment”究竟是什么意思，或者为什么要内联显示内容，但我怀疑Flexbox不是您正在尝试完成的任何工具。
flex和inline-flex都将flex布局应用于容器的子项。 display:flex容器display:flex行为就像块级元素本身，而display:inline-flex使得容器的行为像内联元素一样。
“flex”和“inline-flex”之间的区别
简短的回答：
一个是内联的，另一个基本上像块元素一样响应（但有一些它自己的区别）。
较长的答案：
Inline-Flex – flex的内联版本允许元素和它的子元素具有flex属性，同时仍然保留在文档/网页的常规stream程中。 基本上，如果宽度足够小，则可以将两个内联Flex容器放在同一行中，而没有任何多余的样式允许它们存在于同一行中。 这与“内联块”非常相似。
Flex – 容器和它的子容器都具有弹性属性，但容器会保留该行，因为它是从文档的正常stream程中取出的。 就文档stream程而言，它就像块元素一样响应。 如果没有多余的样式，两个Flexbox容器不能存在于同一行上。
你可能会遇到的问题
由于在你的例子中列出的元素，虽然我猜测，我想你想要使用flex来显示逐行列出的元素，但继续看到的元素并排。
您可能遇到问题的原因是因为flex和inline-flex将默认的“flex-direction”属性设置为“row”。 这将显示孩子并排。 将此属性更改为“列”将允许您的元素堆叠并保留等于其父元素宽度的空间（宽度）。
下面是一些示例来展示flex和inline-flex是如何工作的，同时也是一个快速演示内嵌vs块元素如何工作的例子。
display: inline-flex; flex-direction: row;
小提琴
display: flex; flex-direction: row;
小提琴
display: inline-flex; flex-direction: column;
小提琴
display: flex; flex-direction: column;
小提琴
display: inline;
小提琴
display: block
小提琴
另外，一个很好的参考文档： Flexbox完整指南 – CSS技巧
显示：将柔性布局仅应用于Flex容器或容器的子项。 所以，容器本身保持一个块级元素，因此占据整个屏幕的宽度。
这会导致每个弹性容器移动到屏幕上的新行。
显示：inline-flex将flex布局应用于Flex项目或子项以及容器本身。 因此，容器就像孩子一样，像一个内联的柔性元素一样工作，因此只占用其项目/孩子所需的宽度，而不是整个屏幕的宽度。
这会导致两个或多个柔性容器相继出现，显示为inline-flex，并排排列在屏幕上，直到屏幕的整个宽度为止。
好了，起初我知道可能有点混乱，但是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>
你需要更多的信息，以便浏览器知道你想要什么。 例如，容器的孩子需要被告知如何弯曲。
更新小提琴
我已经添加了#wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; }到你的CSS，并将inline-flex改为flex ，你可以看到这些元素现在如何在页面上均匀分布。
