display：inline-flex和display：flex之间有什么区别？

问题描述 投票：255回答：6

我试图垂直对齐ID包装器中的元素。我将属性display:inline-flex;赋予此ID，因为ID包装器是flex容器。

但是演示文稿没有区别。我期望包装器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 Example

css css3 flexbox
6个回答
316
投票

display: inline-flex不会使弹性项目显示为内联。它使Flex容器显示为内联。这是display: inline-flex和display: flex之间的唯一区别。可以在display: inline-block和display: block以及pretty much any other display type that has an inline counterpart之间进行类似的比较。

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

目前尚不清楚“垂直对齐”究竟是什么意思，或者为什么你想要内联显示内容，但我怀疑flexbox不是你想要完成的任何工具。您正在寻找的机会只是简单的旧内联布局（display: inline和/或display: inline-block），而flexbox不是替代品; flexbox不是每个人都声称的通用布局解决方案（我说这是因为误解可能就是为什么你首先考虑使用flexbox）。

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

49
投票

flex和inline-flex都将柔性布局应用于容器的儿童。具有display:flex的容器本身就像块级元素，而display:inline-flex使容器的行为类似于内联元素。

29
投票

好吧，我知道起初可能有点令人困惑，但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>

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

display flex vs display inline-flex

25
投票

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

简短回答：

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

更长的回答：

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

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

你可能遇到的问题

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

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

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

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

Fiddle

display: flex; flex-direction: row;

Fiddle

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

Fiddle

display: flex; flex-direction: column;

Fiddle

display: inline;

Fiddle

display: block

Fiddle

另外，一个很好的参考文档：A Complete Guide to Flexbox - css tricks

13
投票

显示：flex仅将flex布局应用于Flex容器或容器的子项。因此，容器本身保持块级元素，因此占据了屏幕的整个宽度。

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

显示：inline-flex将flex布局应用于Flex项目或子项以及容器本身。因此，容器就像子项一样表现为内联flex元素，因此仅占用其项目/子项所需的宽度，而不是屏幕的整个宽度。

这使得两个或更多个柔性容器一个接一个地显示为内嵌 - 柔性，在屏幕上并排排列，直到获得整个屏幕宽度。

1
投票

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

Updated Fiddle

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.