我试图在ID包装器内垂直对齐元素。我给属性display:inline-flex;作为ID包装器的伸缩容器。
但是在表现上没有区别。我期望包装器ID中的所有内容都将内联显示。为什么不是呢?
#包装{ 显示:inline-flex; /*无差异显示:flex;* / ｝ 身体< > < div id = "包装" > <标题>标题头> < / <导航> nav < / nav > 除了除了除了< > < / > 主要主要主要< > < / > < / > <页脚页脚页脚> < / div > < /身体>
当前回答
好吧，我知道一开始可能会有点混乱，但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>
也可以快速创建下面的图像，一目了然地显示差异:
其他回答
显示:只对容器的伸缩项或子项应用伸缩布局。因此，容器本身仍然是块级元素，因此占据了屏幕的整个宽度。
这将导致每个伸缩容器移动到屏幕上的新行。
显示:内联伸缩将伸缩布局应用到伸缩项或子项以及容器本身。结果，容器就像子元素一样表现为内联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>
也可以快速创建下面的图像，一目了然地显示差异:
您需要更多的信息，以便浏览器知道您想要什么。例如，需要告诉容器的子容器“如何”伸缩。
更新的小提琴
我添加了#wrapper > * {flex: 1;保证金:汽车;并将inline-flex更改为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属性的双值语法
Flex和inline-flex都将Flex布局应用于容器的子容器。带有display:flex的容器行为类似于块级元素本身，而display:inline-flex使容器行为类似于内联元素。
