display:inline-flex和display:flex之间有什么区别？
ast*_*idx 291 css css3 flexbox
我试图垂直对齐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>Bol*_*ock 362
display: inline-flex不会使弹性项目内联显示.它使Flex容器显示为内联.这是display: inline-flex和之间唯一的区别display: flex.可以在display: inline-block和之间进行类似的比较display: block,并且几乎任何其他具有内联对应的显示类型.1
对柔性物品的影响绝对没有区别; 无论Flex容器是块级还是内联级,flex布局都是相同的.特别是,flex项本身总是表现得像块级框(尽管它们确实具有内联块的一些属性).您无法内联显示弹性项目; 否则你实际上没有flex布局.
目前尚不清楚"垂直对齐"究竟是什么意思,或者为什么你想要内联显示内容,但我怀疑flexbox不是你想要完成的任何工具.您正在寻找的机会只是简单的旧内联布局(display: inline和/或display: inline-block),Flexbox 不是替代品; flexbox 不是每个人都声称的通用布局解决方案(我说这是因为误解可能就是为什么你首先考虑使用flexbox).
1 块布局和内联布局之间的差异超出了这个问题的范围,但最突出的是自动宽度:块级框水平拉伸以填充其包含块,而内联级框缩小以适应它们的内容.事实上,仅仅因为这个原因你几乎不会使用,display: inline-flex除非你有充分的理由在内联显示你的flex容器.
- 增强小提琴演示以区分`inline-flex`和`flex`:http://jsfiddle.net/mgr0en3q/1/ @ fish-graphics和@astridx的原始小提琴 (13认同)
Leo*_*Leo 54
flex并且inline-flex都将flex布局应用于容器的子项.容器的display:flex行为类似于块级元素本身,同时display:inline-flex使容器的行为类似于内联元素.
Ali*_*eza 49
好吧,我知道起初可能有点混乱,但是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>同时快速创建下面的图像,一目了然地显示差异:
- 您正在为此图片使用什么？这个字体很好。 (2认同)
- 上图有一个小错字。“ display：flex-inline”应该类似于“ inline-block”，是“ display：inline-flex”，等等。 (2认同)
Aar*_*ten 28
"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;
display: flex; flex-direction: row;
display: inline-flex; flex-direction: column;
display: flex; flex-direction: column;
display: inline;
display: block
另外,一个很好的参考文档: Flexbox完整指南 - css技巧
Noo*_*mel 13
显示:flex仅将flex布局应用于Flex容器或容器的子项.因此,容器本身保持块级元素,因此占据了屏幕的整个宽度.
这会导致每个Flex容器移动到屏幕上的新行.
显示:inline-flex将flex布局应用于Flex项目或子项以及容器本身.因此,容器就像子项一样表现为内联flex元素,因此仅占用其项目/子项所需的宽度,而不是屏幕的整个宽度.
这使得两个或更多个柔性容器一个接一个地显示为内嵌 - 柔性,在屏幕上并排排列,直到获得整个屏幕宽度.
Fli*_*imm 11
display为清楚起见，改用二值语法
在display实际上CSS属性设置在一次两件事情：外显示类型，和内显示类型。外部显示类型影响元素（充当容器）在其上下文中的显示方式。内部显示类型影响元素的子元素（或容器的子元素）的布局方式。
如果你使用二值display语法，它只在 Firefox 等一些浏览器中支持，那么两者之间的区别就更加明显了：
display: block相当于display: block flowdisplay: inline相当于display: inline flowdisplay: flex相当于display: block flexdisplay: inline-flex相当于display: inline flexdisplay: grid相当于display: block griddisplay: 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。
参考：
- mozzilla.org 上CSS Display 属性的二值语法
- 为了简单起见，我故意不谈论“flow-root”，但如果您想了解更多信息，请阅读参考文章。 (2认同)
我想添加一些有关屏幕阅读器行为的详细信息，因为这里有一些惊喜。
首先介绍一些背景。一些屏幕阅读器（例如NVDA）会以不同的方式处理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: inlinedisplay: 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正如之前所说，它是or元素并不重要；它是一个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！
display: grid/display: inline-grid
flex我没有对此进行测试，但我希望与此处的/相同inline-flex。
为什么这是一个问题？
使用display: inline-block，我们可以创建视觉上看起来非常不同但在语义上被视为“一体”的元素。
例如，考虑在线新闻平台中的以下标题：
<h2>
<span class="category">Rain forests</span>
They need our love
</h2>
现在，您想要在视觉上设计Rain forests与“真实”标题（“他们需要我们的爱”）非常不同的类别 ( ) ，即将每个类别放在自己的行中，如下所示：
如果您将类别设置为display: block元素，那么屏幕阅读器将在两个单独的行中宣布标题，如下所示：Rain forests, heading level 2，然后They need our love, heading level 2。这让用户感到困惑：页面上有两个不同的标题吗？为什么第一个标题没有内容（相反，似乎立即出现了明显的第二个标题）？
但是，如果您将类别设置为display: inline-block元素，那么屏幕阅读器将一次性宣布标题：Rain forests They need our love, heading level 2。
令人遗憾的是，display: inline-flex（也可能inline-grid）没有模仿这种行为。因此，如果您想提供完美的可访问性，您可能需要inline-block在这种情况下使用。
| 归档时间： |
|
| 查看次数： |
234313 次 |
| 最近记录： |