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

更新的小提琴

我添加了#wrapper > * {flex: 1;保证金:汽车;并将inline-flex更改为flex，您可以看到元素现在如何在页面上均匀地分开。

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

先讲一些背景知识。一些屏幕阅读器(如NVDA)处理display: block和display: inline-block的方式是不同的(它们应该是这样的，稍后您将看到)。

不同显示属性的比较

显示:块

一个display: block元素总是在一个单独的“行”中宣布，这意味着NVDA将在其内容结束后停止说话，用户将手动告诉NVDA宣布下一个元素(通常使用下箭头键)。

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

这将使NVDA宣布这是第一行，然后这是另一行。

下面是相同的结果:

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

显示:inline-block

一个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>

这将使屏幕阅读器一口气宣布两个元素:这是第一行，这是另一行。

如前所述，它是内联还是内联块元素并不重要;下面会得到完全相同的结果:

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

显示:flex

这与display: block的工作原理完全相同。

显示:inline-flex

令人惊讶的是，这也像display: block一样工作，而不像display: inline-block!

Display: grid /显示:内联网格

我没有测试这个，但我希望在这里与flex / inline-flex一样。

为什么这是个问题呢?

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

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

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

你现在想要在视觉上设计一个与“真正的”标题(“他们需要我们的爱”)截然不同的类别(Rain forests)，即通过将每个类别放在自己的行中，如下所示:

如果你将类别设置为display: block元素，那么屏幕阅读器将以两行不同的方式显示标题:雨林，标题级别2，那么他们需要我们的爱，标题级别2。这让用户感到困惑:页面上是否有两个不同的标题?为什么第一个标题没有内容(相反，紧接着出现了第二个标题)?

然而，如果你将类别设置为显示:内联块元素，那么屏幕阅读器将一次性宣布标题:雨林他们需要我们的爱，标题2级。

遗憾的是，display: inline-flex(可能还有inline-grid)并没有模仿这种行为。因此，如果你想提供完美的可访问性，你可能想在这种情况下使用内联块。

打开整页以便更好地理解

.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>

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

更新的小提琴

我添加了#wrapper > * {flex: 1;保证金:汽车;并将inline-flex更改为flex，您可以看到元素现在如何在页面上均匀地分开。

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

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

简短的回答:

一个是内联的，另一个基本上像块元素一样响应(但有一些自己的区别)。

再答:

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

Flex——容器及其子容器具有Flex属性，但容器保留该行，因为该行是从文档的正常流中取出的。就文档流而言，它像块元素一样响应。如果没有多余的样式，两个flexbox容器就不能存在于同一行上。

你可能遇到的问题

由于您在示例中列出的元素，尽管我是猜测，但我认为您希望使用flex以均匀的逐行方式显示列出的元素，但仍然可以并排查看这些元素。

您可能遇到问题的原因是flex和inline-flex将默认的“flex-direction”属性设置为“row”。这将显示两个孩子并排在一起。将此属性更改为“column”将允许元素堆叠并保留与其父元素宽度相等的空间(宽度)。

下面是一些演示flex和内联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

小提琴

还有一个很好的参考文档: 一个完整的指南Flexbox - css技巧