flex和display：flex
我很难理解属性display:inline-flex; 。 display:inline-flex;什么区别display:inline-flex; 并display:flex; ？
我试图垂直对齐ID包装中的一些元素。 这就是为什么我给了属性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> display: inline-flex不会使flex项目内联显示。 它使内联flex容器显示。 这是display: inline-flex和display: flex之间的唯一区别。 可以在display: inline-block和display: block之间进行类似的比较，以及几乎任何其他具有内联对应的显示类型。
对弹性项目的影响绝对没有差异; 无论flex容器是块级还是内联级，flex的布局都是相同的。 特别是，flex项目本身的行为总是像块级别的框（尽管它们具有内联块的一些属性）。 您不能在内联显示弹性项目; 否则你实际上没有弹性布局。
目前尚不清楚“垂直对齐”究竟意味着什么，或者为什么您要内联显示内容，但我怀疑Flexbox不适合您尝试完成的任何工作。 机会是你正在寻找的只是普通的旧内联布局（ display: inline和/或display: inline-block ），flexbox不是替代品; flexbox不是所有人都声称的通用布局解决方案（我在说明这一点，因为这种误解可能是您为什么首先考虑使用flexbox的原因）。
1块布局和内联布局之间的差异超出了这个问题的范围，但突出最多的是自动宽度：块级框横向伸展以填充它们的包含块，而内联层框缩小以适合它们内容。 事实上，仅仅因为这个原因，你几乎不会使用display: inline-flex除非你有很好的理由来显示你的flex容器。
flex和inline-flex都将flex布局应用于容器的子项。 带display:flex容器display:flex行为与块级别的元素本身相同，而display:inline-flex使容器的行为类似于内联元素。
“flex”和“inline-flex”之间的区别
简短的回答：
一个是内联的，另一个基本上像块元素一样响应（但有一些它自己的区别）。
较长的回答：
Inline-Flex - flex的内联版本允许元素和它的子元素具有flex属性，同时仍保留在文档/网页的常规流程中。 基本上，如果宽度足够小，可以将两个内联Flex容器放在同一行中，而没有任何多余的样式允许它们存在于同一行中。 这与“内联块”非常相似。
Flex - 容器和它的子容器具有弹性属性，但容器保留该行，因为它是从文档的正常流程中取出的。 就文档流程而言，它就像块元素一样响应。 没有多余的样式，两个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技巧
链接地址: http://www.djcxy.com/p/75663.html下一篇: webkit ,