display：inline-flex和display：flex之间有什么区别？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了display：inline-flex和display：flex之间有什么区别？相关的知识，希望对你有一定的参考价值。
我试图垂直对齐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容器显示为内联。这是display: inline-flex和display: flex之间的唯一区别。可以在display: inline-block和display: block以及pretty much any other display type that has an inline counterpart之间进行类似的比较。
对柔性物品的影响绝对没有区别;无论Flex容器是块级还是内联级，flex布局都是相同的。特别是，flex项本身总是表现得像块级框（尽管它们确实具有内联块的一些属性）。您无法内联显示弹性项目;否则你实际上没有flex布局。
目前尚不清楚“垂直对齐”究竟是什么意思，或者为什么你想要内联显示内容，但我怀疑flexbox不是你想要完成的任何工具。您正在寻找的机会只是简单的旧内联布局（display: inline和/或display: inline-block），而flexbox不是替代品; flexbox不是每个人都声称的通用布局解决方案（我说这是因为误解可能就是为什么你首先考虑使用flexbox）。
1块布局和内联布局之间的差异超出了这个问题的范围，但最突出的是自动宽度：块级框水平拉伸以填充其包含块，而内联级框缩小以适应它们的内容。事实上，仅仅因为这个原因你几乎不会使用display: inline-flex，除非你有充分的理由在内联显示你的flex容器。
flex和inline-flex都将柔性布局应用于容器的儿童。具有display:flex的容器本身就像块级元素，而display:inline-flex使容器的行为类似于内联元素。
好吧，我知道起初可能有点令人困惑，但display正在讨论父元素，所以当我们说：display: flex;，它是关于元素，当我们说display:inline-flex;，也是使元素本身inline ...
这就像制作一个div内联或阻止，运行下面的代码片段，你可以看到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”将允许您的元素堆叠并保留等于其父级宽度的空间（宽度）。
下面是一些示例，展示flex vs 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
显示：flex仅将flex布局应用于Flex容器或容器的子项。因此，容器本身保持块级元素，因此占据了屏幕的整个宽度。
这会导致每个Flex容器移动到屏幕上的新行。
显示：inline-flex将flex布局应用于Flex项目或子项以及容器本身。因此，容器就像子项一样表现为内联flex元素，因此仅占用其项目/子项所需的宽度，而不是屏幕的整个宽度。
这使得两个或更多个柔性容器一个接一个地显示为内嵌 - 柔性，在屏幕上并排排列，直到获得整个屏幕宽度。
您需要更多信息，以便浏览器知道您想要什么。例如，容器的孩子需要被告知“如何”弯曲。
我已将#wrapper > * { flex: 1; margin: auto; }添加到您的CSS并将inline-flex更改为flex，您可以看到元素现在如何在页面上均匀分布。
以上是关于display：inline-flex和display：flex之间有什么区别？的主要内容，如果未能解决你的问题，请参考以下文章
IE9 根本不支持 display: inline-flex 吗？
Flex 布局 display:flex 与 inline-flex 区别
UFUN函数UF_MODL UF_DISP UF_OBJ（name_switch） ( UF_DISP_ask_name_display_statusUF_DISP_set_name_displ(