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>

532279 次浏览
小开

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

更新的小提琴

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

小开
最佳答案

display: inline-flex不会使flex项目内联显示。它使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和inline-flex都将伸缩布局应用于容器的子容器。带有display:flex的容器本身表现为块级元素，而display:inline-flex使容器表现为内联元素。

小开

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

简短的回答:

一个是内联的，另一个基本上像块元素一样响应(但有一些自己的区别)。

再答:

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

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

你可能遇到的问题

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

您可能遇到问题的原因是flex和inline-flex将默认的“flex-direction”属性设置为“row”。这将显示两个孩子并排在一起。将此属性更改为“column”将允许元素堆叠并保留与其父元素宽度相等的空间(宽度)。

下面是一些演示flex和内联flex如何工作的示例，以及一个快速演示内联和块元素如何工作的示例。

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技巧 < / p >

小开

显示:flex只对容器的伸缩项或子项应用伸缩布局。因此，容器本身仍然是块级元素，因此占据了屏幕的整个宽度。

这将导致每个伸缩容器移动到屏幕上的新行。

显示:inline-flex将伸缩布局应用到伸缩项或子项以及容器本身。结果，容器就像子元素一样表现为内联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>

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

display flex vs display inline-flex

小开

打开整页以便更好地理解

.item {
width : 100px;
height : 100px;
margin: 20px;
border: 1px solid blue;
background-color: yellow;
text-align: center;
line-height: 99px;
}


.flex-con {
flex-wrap: wrap;
/* <A>    */
display: flex;
/* 1. uncomment below 2 lines by commenting above 1 line */
/* <B>   */
/*   display: inline-flex; */
	

}


.label {
padding-bottom: 20px;
}
.flex-inline-play {
padding: 20px;
border: 1px dashed green;
/*  <C> */
width: 1000px;
/*   <D> */
display: flex;
}
<figure>
<blockquote>
<h1>Flex vs inline-flex</h1>
<cite>This pen is understand difference between
flex and inline-flex. Follow along to understand this basic property of css</cite>
<ul>
<li>Follow #1 in CSS:
<ul>
<li>Comment <code>display: flex</code></li>
<li>Un-comment <code>display: inline-flex</code></li>
</ul>
</li>
<li>
Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
<ul>
<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
<li>A with C</li>
<li>A with C & D -- Something wrong ? Keep going !</li>
<li>B with C</li>
<li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
</ul>
</li>
</ul>
</blockquote>
  

</figure>
<br/>
<div class="label">Playground:</div>
<div class="flex-inline-play">
<div class="flex-con">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="flex-con">
<div class="item">X</div>
<div class="item">Y</div>
<div class="item">Z</div>
<div class="item">V</div>
<div class="item">W</div>
</div>
</div>

小开

为了清晰起见，使用双值display语法

display CSS属性实际上一次设置了两个东西:外部显示类型和内部显示类型。外部显示类型影响元素(充当容器)在其上下文中的显示方式。内部显示类型影响元素(或容器的子元素)的布局方式。

如果你使用双值display语法，这只在一些浏览器(如Firefox)中被支持，两者之间的区别就会更加明显:

  • 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:

当未指定flex或grid时，内部显示类型flow是默认的内部显示类型。这是我们在<p>中使用的布局子元素的方式。flex和grid是布局子元素的新方法，每个子元素都有自己的位置。

结论:

display: flex和display: inline-flex之间的区别是外层显示类型，第一个外层显示类型是block，第二个外层显示类型是inline。它们的内部显示类型都是flex。

引用:

小开

您可以内联显示伸缩项，前提是您的假设是基于首先需要灵活的内联项。使用flex意味着一个灵活的块级元素。

最简单的方法是使用flex容器，并将其子容器设置为flex属性。在代码方面，它看起来像这样:

.parent{
display: inline-flex;
}


.children{
flex: 1;
}

flex: 1表示一个比率，类似于元素宽度的百分比。

检查这两个链接，以查看简单的Flexbox实例:

  1. https://njbenjamin.com/bundle-3.htm
  2. https://njbenjamin.com/bundle-4.htm

如果你用第一个例子:

https://njbenjamin.com/flex/index_1.htm

你可以摆弄你的浏览器控制台，在flex和inline-flex之间改变容器元素的display。

小开

我想添加一些关于屏幕阅读器行为的细节，因为这里有一些惊喜。

先讲一些背景知识。一些屏幕阅读器，如改良式戏剧活动，处理display: block和display: inline-block的方式是不同的(它们应该是这样的，你将在后面看到)。

不同display属性之间的比较

display: block

display: block元素将始终在单独的“行”中声明，这意味着NVDA将在其内容之后停止声明，用户将手动告诉NVDA声明下一个元素(通常使用Down箭头键)。

<div>This is the first line</div>
<div>This is another line</div>

这将使NVDA宣布This is the first line，然后是This is another line。

下面是相同的结果:

<span style="display: block">This is the first line</span>
<span style="display: block">This is another line</span>

display: inline-block

display: inline-block元素将与所有行内元素(display: inline和display: inline-block)的前面和后面一起声明。

<span style="display: inline-block">This is the first line</span>
<span style="display: inline-block">This is another line</span>

这将使屏幕阅读器一口气宣布两个元素:This is the first line This is another line。

如前所述，它是inline还是inline-block元素并不重要;下面会得到完全相同的结果:

<span style="display: inline">This is the first line</span>     <!-- Inline! -->
<span style="display: inline-block">This is another line</span> <!-- Inline block! -->

display: flex

它的工作原理与display: block完全相同。

display: inline-flex

令人惊讶的是，这个也像display: block一样工作，不像display: inline-block一样工作!

__abc0 / __abc1

我没有测试这个，但我希望和这里的flex / inline-flex一样。

为什么这是个问题呢?

使用display: inline-block，可以创建在视觉上看起来非常不同的元素，但在语义上被视为“一个”。

例如，考虑以下在线新闻平台的标题:

<h2>
<span class="category">Rain forests</span>
They need our love
</h2>

你现在想要在视觉上使类别(Rain forests)的样式与“real"标题(“他们需要我们的爱”)，也就是说，把每个人都放在自己的一行中，就像这样:

截图

如果你将category设为display: block元素，那么屏幕阅读器会像这样分两行声明标题:Rain forests, heading level 2，然后是They need our love, heading level 2。这让用户感到困惑:页面上是否有两个不同的标题?为什么第一个标题没有内容(相反，紧接着出现了第二个标题)?

然而，如果你将category设为display: inline-block元素，那么屏幕阅读器将一次性宣布标题:Rain forests They need our love, heading level 2。

遗憾的是，display: inline-flex(可能还有inline-grid)没有模仿这种行为。因此，如果你想提供完美的可访问性，你可能想在这种情况下使用inline-block。


提交答案