我正在尝试垂直对齐 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>【问题讨论】：
display: inline-flex 不会使 flex 项目 内联显示。它使 flex 容器 内联显示。这是display: inline-flex 和display: flex 之间的唯一区别。可以在display: inline-block 和display: block 和pretty much any other display type that has an inline counterpart 之间进行类似的比较。1
对弹性项目的影响绝对没有区别；无论 flex 容器是块级还是内联级，flex 布局都是相同的。特别是，弹性项目本身总是表现得像块级盒子（尽管它们确实具有内联块的 一些 属性）。您不能内联显示弹性项目；否则你实际上没有弹性布局。
不清楚您所说的“垂直对齐”究竟是什么意思，或者您为什么想要内联显示内容，但我怀疑 flexbox 不是您想要完成的任何事情的正确工具。您正在寻找的可能只是普通的旧内联布局（display: inline 和/或display: inline-block），flexbox 不是的替代品； flexbox 不是每个人都声称的通用布局解决方案（我之所以这么说是因为误解可能是您首先考虑使用 flexbox 的原因）。
1块布局和内联布局的区别不在本题的讨论范围内，但最突出的是自动宽度：块级框水平拉伸以填充它们的包含块，而行内级框缩小以适应它们的内容。事实上，仅仅因为这个原因，你几乎不会使用display: inline-flex，除非你有很好的理由来内联显示你的弹性容器。
【讨论】：
inline-flex 和 flex：jsfiddle.net/mgr0en3q/1 @fish-graphics 和 @astridx 的原始小提琴
好的，我知道一开始可能有点混乱，但是display 是在谈论父元素，所以当我们说：display: flex; 时，它是关于元素，而当我们说 display:inline-flex; 时，也是制作元素本身inline...
就像制作一个div inline 或 block，运行下面的sn-p，你可以看到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 都将 flex 布局应用于容器的子级。带有display:flex 的容器本身表现得像块级元素，而display:inline-flex 使容器表现得像内联元素。
【讨论】：
“flex”和“inline-flex”的区别
简答：
一个是内联的，另一个基本上像块元素一样响应（但有一些自己的差异）。
更长的答案：
Inline-Flex - 内联版本的 flex 允许元素及其子元素具有 flex 属性，同时仍保留在文档/网页的常规流程中。基本上，如果宽度足够小，您可以将两个内联 flex 容器放在同一行中，而无需任何多余的样式以允许它们存在于同一行中。这与“inline-block”非常相似。
Flex - 容器及其子容器具有 flex 属性，但容器保留行，因为它已脱离文档的正常流程。就文档流而言，它像块元素一样响应。如果没有过多的样式，两个 flexbox 容器不能存在于同一行中。
您可能遇到的问题
由于您在示例中列出的元素，尽管我在猜测，但我认为您想使用 flex 以均匀的逐行方式显示列出的元素，但继续并排查看元素.
您可能遇到问题的原因是 flex 和 inline-flex 将默认的“flex-direction”属性设置为“row”。这将并排显示孩子。将此属性更改为“列”将允许您的元素堆叠并保留与其父级宽度相等的空间（宽度）。
下面是一些示例，展示了 flex 与 inline-flex 的工作原理，以及内联元素与块元素如何工作的快速演示......
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
另外，一个很好的参考文档： A Complete Guide to Flexbox - css tricks
【讨论】：
display 语法display CSS 属性实际上同时设置了两件事：外部显示类型和内部显示类型。外部显示类型会影响元素（充当容器）在其上下文中的显示方式。内部显示类型会影响元素的子项（或容器的子项）的布局方式。
如果你使用二值display语法，这种语法只有Firefox等部分浏览器支持，那么两者的区别就更加明显了：
display: block 等价于 display: block flow
display: inline 等价于 display: inline flow
display: flex 等价于display: block flexdisplay: inline-flex 等价于display: inline flexdisplay: grid 等价于 display: block grid
display: inline-grid 等价于 display: inline grid
block或inline：外部显示类型为block 的元素将占据它可用的整个宽度，就像<div> 一样。外部显示类型为 inline 的元素只会占用它需要的宽度，并会像 <span> 那样进行换行。
flow、flex或grid：当未指定flex 或grid 时，内部显示类型flow 是默认的内部显示类型。例如，这是我们在<p> 中习惯的布局子元素的方式。 flex 和 grid 是布置孩子的新方式，每个人都应该有自己的职位。
display: flex和display: inline-flex的区别在于外显类型，第一个外显类型block，第二个外显类型inline。两者都有flex的内部显示类型。
【讨论】：
flow-root，但如果您想了解更多信息，请阅读参考文章。
Display:flex 仅将 flex 布局应用于容器的 flex 项或子项。因此，容器本身是块级元素，因此占据了屏幕的整个宽度。
这会导致每个 flex 容器移动到屏幕上的新行。
Display:inline-flex 将 flex 布局应用于 flex 项或子项以及容器本身。因此，容器就像子元素一样充当内联 flex 元素，因此仅占用其项目/子元素所需的宽度，而不是屏幕的整个宽度。
这会导致两个或多个 flex 容器一个接一个，显示为 inline-flex，在屏幕上并排对齐，直到占据整个屏幕宽度。
【讨论】：
您可以内联显示弹性项目，前提是您的假设是基于希望将灵活的内联项目放在第一位。使用 flex 意味着灵活的块级元素。
最简单的方法是使用 flex 容器，并将其子项设置为 flex 属性。就代码而言，这看起来像这样：
.parent{
display: inline-flex;
}
.children{
flex: 1;
}
flex: 1 表示比率，类似于元素宽度的百分比。
检查这两个链接以查看简单的实时 Flexbox 示例：
如果您使用第一个示例：
https://njbenjamin.com/flex/index_1.htm
您可以使用浏览器控制台，在flex 和inline-flex 之间更改容器元素的display。
【讨论】：
您需要更多信息，以便浏览器知道您想要什么。例如，需要告诉容器的子容器“如何”弯曲。
我已将#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>【讨论】：