显示之间的区别:内联flex和显示:flex

我很难理解属性display:inline-flex;display:inline-flex;什么区别display:inline-flex;display:flex;

我想垂直alignmentID包装中的一些元素。 这就是为什么我给了属性display:inline-flex; 到这个ID; 因为ID包装是柔性容器。

但是介绍没有区别。 我期望包装器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> 

JSFiddle示例

有什么不同?

display: inline-flex不会使flex项目内联显示。 它使内联flex容器显示。 这是display: inline-flex之间的唯一区别display: inline-flexdisplay: flex 。 可以在display: inline-blockdisplay: block之间进行类似的比较,以及几乎任何其他具有内联对应的显示types 。

对弹性项目的影响绝对没有差别; 柔性布局是相同的,无论柔性容器是块级还是内联级。 特别是,flex项目本身的行为总是像块级别的框(尽pipe它们具有内联块的一些属性)。 您不能内联显示弹性项目; 否则你实际上没有一个灵活的布局。 目前尚不清楚“垂直alignment”究竟是什么意思,或者为什么要内联显示内容,但我怀疑Flexbox不是您正在尝试完成的任何工具。

flexinline-flex都将flex布局应用于容器的子项。 display:flex容器display:flex行为就像块级元素本身,而display:inline-flex使得容器的行为像内联元素一样。

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

简短的回答:

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

较长的答案:

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

Flex – 容器和它的子容器都具有弹性属性,但容器会保留该行,因为它是从文档的正常stream程中取出的。 就文档stream程而言,它就像块元素一样响应。 如果没有多余的样式,两个Flexbox容器不能存在于同一行上。

你可能会遇到的问题

由于在你的例子中列出的元素,虽然我猜测,我想你想要使用flex来显示逐行列出的元素,但继续看到的元素并排。

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

下面是一些示例来展示flex和inline-flex是如何工作的,同时也是一个快速演示内嵌vs块元素如何工作的例子。

 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技巧

显示:将柔性布局仅应用于Flex容器或容器的子项。 所以,容器本身保持一个块级元素,因此占据整个屏幕的宽度。

这会导致每个弹性容器移动到屏幕上的新行。

显示:inline-flex将flex布局应用于Flex项目或子项以及容器本身。 因此,容器就像孩子一样,像一个内联的柔性元素一样工作,因此只占用其项目/孩子所需的宽度,而不是整个屏幕的宽度。

这会导致两个或多个柔性容器相继出现,显示为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> 

你需要更多的信息,以便浏览器知道你想要什么。 例如,容器的孩子需要被告知如何弯曲。

更新小提琴

我已经添加了#wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; } #wrapper > * { flex: 1; margin: auto; }到你的CSS,并将inline-flex改为flex ,你可以看到这些元素现在如何在页面上均匀分布。