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 之间进行类似的比较。¹

对弹性项目的影响绝对没有区别；无论 flex 容器是块级还是内联级，flex 布局都是相同的。特别是，弹性项目本身总是表现得像块级盒子（尽管它们确实有一些内联块的属性）。您不能内联显示弹性项目；否则你实际上没有弹性布局。

目前尚不清楚“垂直对齐”究竟是什么意思，或者为什么要内联显示内容，但我怀疑 flexbox 不是您想要完成的任何事情的正确工具。您正在寻找的可能只是普通的旧内联布局（display: inline 和/或 display: inline-block），flexbox 不是的替代品； flexbox 不是每个人都声称的通用布局解决方案（我之所以这么说是因为误解可能是您首先考虑使用 flexbox 的原因）。

¹ _{块布局和内联布局的区别不在这个问题的范围内，但最突出的是自动宽度：块级框水平拉伸以填充其包含块，而行内级别的框会缩小以适应其内容。事实上，仅出于这个原因，您几乎不会使用 display: inline-flex，除非您有充分的理由来内联显示您的 flex 容器。}

---

好的，我知道一开始可能有点混乱，但是 display 是在谈论父元素，所以当我们说：display: flex; 时，它是关于元素，当我们说 display:inline-flex; 时，也是在制作元素本身 inline...

这就像制作一个 div inline 或 block，运行下面的代码段，您可以看到 display flex 如何分解到下一行：

.inline-flex { 显示：inline-flex; } .flex { 显示：弹性； } p { 颜色：红色； }

Display Inline Flex

显示 Flex

还可以快速创建下图，让差异一目了然：

https://i.stack.imgur.com/mns2H.jpg

---

flex 和 inline-flex 都将 flex 布局应用于容器的子级。带有 display:flex 的容器本身的行为类似于块级元素，而 display:inline-flex 使容器的行为类似于内联元素。

---

为了清楚起见，改为使用二值显示语法

display CSS 属性实际上同时设置了两件事：外部显示类型和内部显示类型。外部显示类型会影响元素（充当容器）在其上下文中的显示方式。内部显示类型会影响元素的子项（或容器的子项）的布局方式。

如果使用双值 display 语法，这种语法仅在某些浏览器（如 Firefox）中受支持，则两者之间的区别会更加明显：

display:block 等价于 display:block 流

display: inline 等价于 display: inline flow

display: flex 等价于 display: block flex

display: inline-flex 等价于 display: inline flex

display:grid 等价于 display:block grid

display: inline-grid 等价于 display: inline grid

外部显示类型：块或内联：

外部显示类型为 block 的元素将占据它可用的整个宽度，就像 <div> 一样。外部显示类型为 inline 的元素将仅占用它需要的宽度，并像 <span> 一样进行换行。

内部显示类型：flow、flex 或 grid：

当未指定 flex 或 grid 时，内部显示类型 flow 是默认的内部显示类型。例如，这是我们在 <p> 中习惯的布局子元素的方式。 flex 和 grid 是布置孩子的新方式，每个孩子都应该有自己的职位。

结论：

display: flex和display: inline-flex的区别是外显类型，第一个外显类型是block，第二个外显类型是inline。它们都具有 flex 的内部显示类型。

参考：

mozzilla.org 上 CSS Display 属性的二值语法

---

“flex”和“inline-flex”之间的区别

简短的回答：

一个是内联的，另一个基本上像块元素一样响应（但有一些自己的差异）。

更长的答案：

Inline-Flex - 内联版本的 flex 允许元素及其子元素具有 flex 属性，同时仍保留在文档/网页的常规流程中。基本上，如果宽度足够小，您可以将两个内联 flex 容器放置在同一行中，而无需任何多余的样式以允许它们存在于同一行中。这与“内联块”非常相似。

Flex - 容器及其子容器具有 flex 属性，但容器保留行，因为它已脱离文档的正常流程。就文档流而言，它像块元素一样响应。如果没有过多的样式，两个 flexbox 容器不能存在于同一行。

您可能遇到的问题

由于您在示例中列出的元素，尽管我猜想，我认为您想使用 flex 以均匀的逐行方式显示列出的元素，但继续并排查看元素。

您可能遇到问题的原因是 flex 和 inline-flex 将默认的“flex-direction”属性设置为“row”。这将并排显示孩子。将此属性更改为“列”将允许您的元素堆叠并保留等于其父级宽度的空间（宽度）。

下面是一些示例来展示 flex 与 inline-flex 的工作原理，以及内联与块元素如何工作的快速演示......

display: inline-flex; flex-direction: row;

Fiddle

display: flex; flex-direction: row;

Fiddle

display: inline-flex; flex-direction: column;

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

另外，一个很好的参考文档：A Complete Guide to Flexbox - css tricks

---

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/bundle-3.htm https://njbenjamin.com/bundle-4.htm

如果您使用第一个示例：

https://njbenjamin.com/flex/index_1.htm

您可以使用浏览器控制台在 flex 和 inline-flex 之间更改容器元素的 display。

---

您需要更多信息，以便浏览器知道您想要什么。例如，需要告诉容器的孩子“如何”弯曲。

Updated Fiddle

我已将 #wrapper > * { flex: 1; margin: auto; } 添加到您的 CSS 并将 inline-flex 更改为 flex，您可以看到元素现在如何在页面上均匀地间隔开。

---

我想添加一些关于屏幕阅读器行为的细节，因为这里有一些惊喜。

先来点背景。某些屏幕阅读器（如 NVDA）以不同方式处理 display: block 和 display: inline-block（它们应该以不同的方式处理，稍后您将看到）。

不同显示属性之间的比较

显示：块

display: block 元素将始终在单独的“行”中宣布，这意味着 NVDA 将在其内容之后停止讲话，并且用户将手动告诉 NVDA 宣布下一个元素（通常使用 Down 箭头键）。

<div>This is the first line</div>
<div>This is another line</div>

这将使 NVDA 宣布 This is the first line，然后是 This is another line。

以下产生相同的结果：

<span style="display: block">This is the first line</span>
<span style="display: block">This is another line</span>

显示：内联块

display: inline-block 元素将与所有前面和后面的其他内联元素（display: inline 和 display: inline-block）一起被宣布。

<span style="display: inline-block">This is the first line</span>
<span style="display: inline-block">This is another line</span>

这将使屏幕阅读器一次性宣布这两个元素：This is the first line This is another line。

如前所述，它是 inline 还是 inline-block 元素都没有关系；以下产生完全相同的结果：

<span style="display: inline">This is the first line</span>     <!-- Inline! -->
<span style="display: inline-block">This is another line</span> <!-- Inline block! -->

显示：弹性

这与 display: block 完全一样。

显示：inline-flex

令人惊讶的是，这个也像 display: block，不像 display: inline-block！

显示：网格/显示：内联网格

我没有对此进行测试，但我希望与这里的 flex / inline-flex 一样。

为什么这是个问题？

使用 display: inline-block，可以创建在视觉上看起来非常不同但在语义上被视为“一体”的元素。

例如，考虑在线新闻平台中的以下标题：

<h2>
  <span class="category">Rain forests</span>
  They need our love
</h2>

您现在希望在视觉上设置类别 (Rain forests) 与“真实”标题（“他们需要我们的爱”）非常不同的样式，即将每个类别放在自己的行中，如下所示：

https://i.stack.imgur.com/flRdg.png

如果您将类别设为 display: block 元素，则屏幕阅读器将在两个单独的行中宣布标题，如下所示：Rain forests, heading level 2，然后是 They need our love, heading level 2。这让用户感到困惑：页面上有两个不同的标题吗？为什么第一个没有内容（相反，似乎立即出现了明显的第二个标题）？

但是，如果您将类别设为 display: inline-block 元素，那么屏幕阅读器将一次性宣布标题：Rain forests They need our love, heading level 2。

很遗憾，display: inline-flex（可能还有 inline-grid）没有模仿这种行为。因此，如果您想提供完美的可访问性，您可能希望在这种情况下使用 inline-block。

---

打开整页以便更好地理解

.item { 宽度：100px;高度：100px；边距：20px；边框：1px 纯蓝色；背景颜色：黄色；文本对齐：居中；行高：99px； } .flex-con { flex-wrap: 换行； /* */ display: flex; /* 1. 通过在 1 行以上注释来取消 2 行以下的注释 */ /* */ /* display: inline-flex; */ } .label { padding-bottom: 20px; } .flex-inline-play { 填充：20px;边框：1px 虚线绿色； /* */ 宽度：1000px; /* */ display: flex; }

Flex vs inline-flex

这支笔理解flex和inline-flex之间的区别。跟着来了解css的这个基本属性

• 按照CSS中的#1：
  • Comment display: flex
  • Un -comment display: inline-flex
• 希望你能理解到现在。这与 `inline-block` 与 `block` 的情况非常相似。让我们超越并理解用例来应用学习。现在让我们通过仅按照指示取消注释来使用 A、B、C 和 D 的组合：
  • A 与 D -- 这样做与 display: inline-flex 的工作相同.嗯，你可能是对的，但并非总是如此，继续前进！
  • A 与 C
  • A 与 C & D -- 有什么问题吗？继续！
  • B 与 C
  • B 与 C&D - 还是一样？你学到东西了吗？如果您在 2 个 flexbox .flex-con 的父级中有空间可以占用，则 inline-flex 很有用。这是唯一的用例

游乐场：

1

2

3

4

X

Y

Z

V

W

< /div>

---