我正在尝试在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>Answers:
display: inline-flex不会使弹性项目内联显示。它使伸缩容器内联显示。这是display: inline-flex和之间的唯一区别display: flex。可以在display: inline-block和之间以及display: block与具有内联对应项的几乎所有其他显示类型之间进行类似的比较。1个
弹性项目的效果绝对没有区别；无论flex容器是块级还是内联级，flex布局都是相同的。特别是，flex项本身始终像块级框一样运行（尽管它们确实具有inline-blocks的某些属性）。您不能内联显示弹性项目；否则，您实际上没有弹性布局。
目前尚不清楚“垂直对齐”到底是什么意思，或者为什么要真正内联显示内容，但我不确定flexbox不是您要完成的任务的正确工具。机会是你要找的是什么，只是普通的老直列布局（display: inline和/或display: inline-block），为此，Flexbox将是不更换; flexbox 不是所有人都声称的通用布局解决方案（我之所以这样说是因为误解可能是您首先考虑使用flexbox的原因）。
1 块布局和内联布局之间的差异不在此问题的范围内，但最突出的是自动宽度：块级框水平拉伸以填充其包含的块，而内联级框缩小以适合其容纳的块内容。实际上，仅出于这个原因，display: inline-flex除非您有很好的理由内联显示flex容器，否则您几乎永远不会使用。
好的，我知道一开始可能有些混乱，但是display谈论的是父元素，因此意味着当我们说：display: flex;，它是关于元素的，而当我们说时display:inline-flex;，也是在使元素本身inline...
就像制作一个div inline或block一样，运行下面的代码片段，您将看到如何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>还可以快速创建以下图像，以一眼看出差异：
“ flex”和“ inline-flex”之间的区别
简短答案：
一个是内联的，另一个基本上像块元素一样响应（但有一些不同）。
更长的答案：
Inline-Flex-Flex的内联版本允许元素及其子元素具有flex属性，同时仍保留在文档/网页的常规流程中。基本上，如果宽度足够小，则可以将两个行内Flex容器放在同一行中，而没有任何多余的样式以允许它们存在于同一行中。这非常类似于“内联块”。
Flex-容器及其子级具有flex属性，但是容器保留该行，因为它是从文档的正常流程中取出的。就文档流而言，它的响应就像一个块元素。没有多余的样式，两个flexbox容器不能在同一行上存在。
您可能遇到的问题
由于您在示例中列出了元素，尽管我猜测是这样，但我想您想使用flex以偶数行的方式显示列出的元素，但继续并排查看这些元素。
您可能会遇到问题的原因是因为flex和inline-flex将默认的“ flex-direction”属性设置为“ row”。这将并排显示子级。将此属性更改为“ column”将允许您的元素堆叠并保留等于其父代宽度的space（width）。
以下是一些示例以展示flex vs inline-flex的工作原理，以及有关inline vs block元素如何工作的快速演示...
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技巧
Display：flex仅将flex布局应用于容器的flex项或子项。因此，容器本身停留在块级元素上，因此占据了屏幕的整个宽度。
这将导致每个flex容器在屏幕上移至新行。
Display：inline-flex将flex布局应用于flex项或子项以及容器本身。结果，容器就像子项一样充当内联flex元素，因此仅占用其项目/子项所需的宽度，而不是占据屏幕的整个宽度。
这将导致两个或多个flex容器一个接一个地显示为inline-flex，并在屏幕上并排对齐，直到占据整个屏幕宽度为止。
您需要更多信息，以便浏览器知道您想要什么。例如，需要告知容器的子代“如何”弯曲。
我已经添加#wrapper > * { flex: 1; margin: auto; }到CSS并更改inline-flex为flex，您可以看到元素现在如何在页面上均匀分布。
在全页中打开以更好地了解
.item {
width : 100px;
height : 100px;
margin: 20px;
border: 1px solid blue;
background-color: yellow;
text-align: center;
line-height: 99px;
}
.flex-con {
flex-wrap: wrap;
/* <A> */
display: flex;
/* 1. uncomment below 2 lines by commenting above 1 line */
/* <B> */
/* display: inline-flex; */
}
.label {
padding-bottom: 20px;
}
.flex-inline-play {
padding: 20px;
border: 1px dashed green;
/* <C> */
width: 1000px;
/* <D> */
display: flex;
}<figure>
<blockquote>
<h1>Flex vs inline-flex</h1>
<cite>This pen is understand difference between
flex and inline-flex. Follow along to understand this basic property of css</cite>
<ul>
<li>Follow #1 in CSS:
<ul>
<li>Comment <code>display: flex</code></li>
<li>Un-comment <code>display: inline-flex</code></li>
</ul>
</li>
<li>
Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
<ul>
<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
<li>A with C</li>
<li>A with C & D -- Something wrong ? Keep going !</li>
<li>B with C</li>
<li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
</ul>
</li>
</ul>
</blockquote>
</figure>
<br/>
<div class="label">Playground:</div>
<div class="flex-inline-play">
<div class="flex-con">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="flex-con">
<div class="item">X</div>
<div class="item">Y</div>
<div class="item">Z</div>
<div class="item">V</div>
<div class="item">W</div>
</div>
</div>
inline-flex和flex：jsfiddle.net/mgr0en3q/1 @ fish-graphics和@astridx的原始提琴