CSS 的 display: inline -flex 和 display:flex 有什么区别？

display: flex 和 display: inline-flex 是 CSS 中的两种显示模式，它们都涉及到了 CSS 的一个模块，叫做弹性盒布局（Flexible Box Layout），简称 Flexbox。Flexbox 是一种一维布局方法，为盒状模型提供了更加灵活的排列方式。

display: flex

当你给一个元素设置 display: flex 属性时，这个元素会成为一个块级的弹性容器（flex container），意味着该元素将表现出块级元素的特性。具体来说，有以下几点：

• 块级元素特性：就像 display: block 的元素一样，display: flex 的元素会在页面中单独占据一行，前后都会有换行。
• Flex容器：该元素内部的直接子元素会成为弹性项目（flex items），并且这些子元素会按照 flex 模型进行排列，不再是默认的块级或者内联流。
• 布局控制：对于子元素，你可以使用 flexbox 提供的一系列属性来控制它们的对齐、方向、顺序等，例如 justify-content, align-items, flex-direction, order, flex-grow 等。

例如，如果你有一个导航栏或者一列卡片，可能会希望它们占满整个容器的宽度，并且希望它们能够灵活地伸缩以适应不同屏幕大小，那么 display: flex 就是一个很好的选择。

display: inline-flex

而当你使用 display: inline-flex 时，你的元素还是会成为一个弹性容器，但它表现为一个内联级的容器。这意味着：

• 内联元素特性：display: inline-flex 的元素不会单独占据一行，它会像 display: inline 元素一样，和其他内联元素或者文字在同一行流中排列，除非空间不足以容纳它。
• Flex容器：内部子元素的表现与 display: flex 一样，会成为弹性项目并根据 flexbox 属性进行排列。
• 排列特性：尽管 display: inline-flex 的元素在外部表现为内联元素，但内部子元素的排列仍然是一个完整的 flexbox 布局环境。

此时，display: inline-flex 适用于当你需要一个内容区块在文本流中表现为内联元素，同时还想在这个区块内部使用 flexbox 排列其内部元素。例如，一个小的工具条或按钮组可能就会使用到 display: inline-flex。

总结

简单来说，最主要的区别在于外部的排列模式，display: flex 会让元素表现为块级元素，而 display: inline-flex 则是内联元素。选择哪个取决于你想如何在页面流中定位你的弹性容器以及其内部的元素。

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

对弹性项目的效果绝对没有区别；无论 Flex 容器是块级还是内联级，Flex 布局都是相同的。特别是，弹性项目本身总是表现得像块级框（尽管它们确实具有内联块的_一些_属性）。您无法内嵌显示弹性项目；否则你实际上就没有弹性布局。

目前尚不清楚“垂直对齐”到底是什么意思，或者为什么您想要内联显示内容，但我怀疑 Flexbox 不是您想要完成的任何任务的正确工具。很可能您正在寻找的只是普通的旧式内联布局（display: inline和/或display: inline-block），而 Flexbox 不能替代_它_； Flexbox 并不是_每个_人都声称的通用布局解决方案（我这么说是因为这种误解可能是您首先考虑 Flexbox 的原因）。

1 块布局和内联布局之间的差异超出了本问题的范围，但最突出的是自动宽度：块级框水平拉伸以填充其包含块，而内联级框缩小以适应其包含块内容。事实上，仅出于这个原因，您几乎永远不会使用display: inline-flex，除非您有充分的理由内联显示 Flex 容器。

flex并且inline-flex都将弹性布局应用于容器的子级。容器 with 的display:flex行为类似于块级元素本身，而display:inline-flex使得容器的行为类似于内联元素。