乐闻世界logo
搜索文章和话题

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

CSS
1 年前提问
6 个月前修改
浏览次数134次

6个答案

1
2
3
4
5
6

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 则是内联元素。选择哪个取决于你想如何在页面流中定位你的弹性容器以及其内部的元素。

2024年6月29日 12:07 回复

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 容器。

2024年6月29日 12:07 回复

好的，我知道一开始可能有点令人困惑，但是display谈论的是父元素，所以意味着当我们说：时display: flex;，它是关于元素的，当我们说时display:inline-flex;，也是在制作元素本身inline......

这就像创建一个div inline或block，运行下面的代码片段，您可以看到如何display flex分解到下一行：

shell
.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>

运行代码片段Hide results

展开片段

还可以快速创建下面的图像，以一目了然地显示差异：

显示柔性与显示内联柔性

2024年6月29日 12:07 回复

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

2024年6月29日 12:07 回复

display为了清楚起见，改用二值语法

CSSdisplay属性实际上同时设置两件事：外部显示类型和内部显示类型。外部显示类型影响元素（充当容器）在其上下文中的显示方式。内部显示类型影响元素的子元素（或容器的子元素）的布局方式。

如果您使用仅在某些浏览器（如 Firefox）中支持的二值display语法，则两者之间的差异更加明显：

  • display: block相当于display: block flow
  • display: inline相当于display: inline flow
  • display: flex相当于display: block flex
  • display: inline-flex相当于display: inline flex
  • display: grid相当于display: block grid
  • display: inline-grid相当于display: inline grid

外部显示类型：block或inline：

外部显示类型为 的元素block将占用其可用的整个宽度，就像<div>这样做一样。外部显示类型为 的元素inline将仅占用其所需的宽度，就像换行一样<span>。

内部显示类型：flow、flex或grid：

当或未指定时，内部显示类型flow为默认内部显示类型。这是我们在实例中习惯的布局子元素的方式。这些都是让每个孩子都有自己的位置的新方法。flex``grid``<p>``flex``grid

结论：

display: flex和 的区别display: inline-flex在于外部显示类型，第一个的外部显示类型是block，第二个的外部显示类型是inline。两者的内部显示类型均为flex。

参考：

2024年6月29日 12:07 回复

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

简短回答：

一个是内联的，另一个基本上像块元素一样响应（但有一些自己的差异）。

更长的答案：

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

Flex - 容器及其子容器具有 flex 属性，但容器保留该行，因为它是从文档的正常流程中取出的。就文档流而言，它的响应就像块元素一样。如果没有多余的样式，两个 Flexbox 容器不能存在于同一行。

您可能遇到的问题

由于您在示例中列出的元素，尽管我猜测，我认为您希望使用 flex 以均匀的逐行方式显示列出的元素，但继续并排查看元素。

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

下面是一些示例，展示了 flex 与 inline-flex 的工作原理，以及内联元素与块元素如何工作的快速演示......

shell
display: inline-flex; flex-direction: row;

小提琴

shell
display: flex; flex-direction: row;

小提琴

shell
display: inline-flex; flex-direction: column;

小提琴

shell
display: flex; flex-direction: column;

小提琴

shell
display: inline;

小提琴

shell
display: block

小提琴

另外，还有一个很棒的参考文档： A Complete Guide to Flexbox - css技巧

2024年6月29日 12:07 回复

你的答案