我试图在ID包装器内垂直对齐元素。我给属性display:inline-flex;作为ID包装器的伸缩容器。
但是在表现上没有区别。我期望包装器ID中的所有内容都将内联显示。为什么不是呢?
#包装{ 显示:inline-flex; /*无差异显示:flex;* / ｝ 身体< > < div id = "包装" > <标题>标题头> < / <导航> nav < / nav > 除了除了除了< > < / > 主要主要主要< > < / > < / > <页脚页脚页脚> < / div > < /身体>
当前回答
Flex和inline-flex都将Flex布局应用于容器的子容器。带有display:flex的容器行为类似于块级元素本身，而display:inline-flex使容器行为类似于内联元素。
其他回答
为了清晰起见，使用双值显示语法
实际上，display CSS属性一次设置了两个东西:外部显示类型和内部显示类型。外部显示类型影响元素(充当容器)在其上下文中的显示方式。内部显示类型影响元素(或容器的子元素)的布局方式。
如果你使用双值显示语法，这只在一些浏览器(如Firefox)中被支持，两者之间的区别会更加明显:
Display: block相当于Display: block的流量 Display: inline相当于Display: inline流 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>所做的那样。
内部显示类型:流动、弯曲或网格:
内部显示类型流是未指定flex或grid时的默认内部显示类型。这是我们在<p>中使用的布局子元素的方式。Flex和网格是布局子节点的新方法，每个子节点都有自己的位置。
结论:
display: flex和display: inline-flex的区别是外层显示类型，第一个外层显示类型是块，第二个外层显示类型是内联。它们都有内部显示类型的flex。
引用:
mozzilla.org上CSS Display属性的双值语法
显示:inline-flex不会使伸缩项目内联显示。它使伸缩容器内联显示。这是display: inline-flex和display: flex之间的唯一区别。类似的比较可以在display: inline-block和display: block之间进行，以及几乎任何其他具有内联对应项的显示类型
对伸缩物品的效果绝对没有区别;无论Flex容器是块级还是内联级，Flex布局都是相同的。特别是，伸缩项本身总是表现得像块级盒子(尽管它们确实具有内联块的一些属性)。不能内联显示伸缩项;否则你就没有伸缩布局。
It is not clear what exactly you mean by "vertically align" or why exactly you want to display the contents inline, but I suspect that flexbox is not the right tool for whatever you are trying to accomplish. Chances are what you're looking for is just plain old inline layout (display: inline and/or display: inline-block), for which flexbox is not a replacement; flexbox is not the universal layout solution that everyone claims it is (I'm stating this because the misconception is probably why you're considering flexbox in the first place).
块布局和内联布局之间的区别超出了这个问题的范围，但最突出的一个是自动宽度:块级盒子水平拉伸以填充其包含的块，而内联级盒子收缩以适应其内容。事实上，仅仅因为这个原因，你几乎永远不会使用display: inline-flex，除非你有一个很好的理由内联显示你的flex容器。
好吧，我知道一开始可能会有点混乱，但display指的是父元素，所以当我们说:display: flex;时，它指的是元素而当我们说display:inline-flex;时，它也使元素本身成为内联的。
这就像创建一个div内联或块，运行下面的代码片段，你可以看到如何显示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>
也可以快速创建下面的图像，一目了然地显示差异:
我想添加一些关于屏幕阅读器行为的细节，因为这里有一些惊喜。
先讲一些背景知识。一些屏幕阅读器(如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)并没有模仿这种行为。因此，如果你想提供完美的可访问性，你可能想在这种情况下使用内联块。
您可以内联显示伸缩项，前提是您的假设是基于首先需要灵活的内联项。使用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和内联flex之间更改容器元素的显示。
