display:inline-flex和display:flex之间有什么区别?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display:inline-flex和display:flex之间有什么区别?相关的知识,希望对你有一定的参考价值。

我试图垂直对齐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

答案

display: inline-flex不会使弹性项目显示为内联。它使Flex容器显示为内联。这是display: inline-flexdisplay: flex之间的唯一区别。可以在display: inline-blockdisplay: 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容器。

另一答案

flexinline-flex都将柔性布局应用于容器的儿童。具有display:flex的容器本身就像块级元素,而display: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>
另一答案

“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

另一答案

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

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

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

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

另一答案

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

Updated Fiddle

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

以上是关于display:inline-flex和display:flex之间有什么区别?的主要内容,如果未能解决你的问题,请参考以下文章

IE9 根本不支持 display: inline-flex 吗?

Flex 布局 display:flex 与 inline-flex 区别

IE9不支持显示:inline-flex吗?

设置div伸缩盒子

弹性盒布局

UFUN函数UF_MODL UF_DISP UF_OBJ(name_switch) ( UF_DISP_ask_name_display_statusUF_DISP_set_name_displ(