ChatGPT解决这个技术问题 Extra ChatGPT

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

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

但是在呈现上没有区别。我希望包装器 ID 中的所有内容都显示为 inline。为什么不是?

#wrapper { display: inline-flex; /*显示没有区别:flex; */ }

header
main
footer


B
BoltClock

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

对弹性项目的影响绝对没有区别;无论 flex 容器是块级还是内联级,flex 布局都是相同的。特别是,弹性项目本身总是表现得像块级盒子(尽管它们确实有一些内联块的属性)。您不能内联显示弹性项目;否则你实际上没有弹性布局。

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

1 块布局和内联布局的区别不在这个问题的范围内,但最突出的是自动宽度:块级框水平拉伸以填充其包含块,而行内级别的框会缩小以适应其内容。事实上,仅出于这个原因,您几乎不会使用 display: inline-flex,除非您有充分的理由来内联显示您的 flex 容器。


增强的小提琴演示以区分 inline-flexflexjsfiddle.net/mgr0en3q/1 @fish-graphics 和 @astridx 的原始小提琴
绝对有帮助的答案。我第一次很困惑。当我应用 inline flex 时,当我也应用 display flex 时,flex 项目不会改变。实际上它适用于弹性容器:)
还值得注意的是 inline 和 inline-flex 之间的区别:使用 inline-flex 你不会得到可折叠的边距
@capr:的确,一般来说,内联级元素和块级元素之间存在许多实际差异,这些都是元素本身(在本例中为弹性容器)布局方式差异的基本副作用。
A
Alireza

好的,我知道一开始可能有点混乱,但是 display 是在谈论父元素,所以当我们说:display: flex; 时,它是关于元素,当我们说 display:inline-flex; 时,也是在制作元素本身 inline...

这就像制作一个 div inlineblock,运行下面的代码段,您可以看到 display flex 如何分解到下一行:

.inline-flex { 显示:inline-flex; } .flex { 显示:弹性; } p { 颜色:红色; }

Display Inline Flex

header
main
footer
header

显示 Flex

header
main
footer
header
< nav>nav
main
footer

还可以快速创建下图,让差异一目了然:

https://i.stack.imgur.com/mns2H.jpg


这张图你用什么?这个字体非常好。
上图有一个小错别字。 "display: flex-inline" 应该是 "display: inline-flex" 类似于 "inline-block" 等等。
L
Leo

flexinline-flex 都将 flex 布局应用于容器的子级。带有 display:flex 的容器本身的行为类似于块级元素,而 display:inline-flex 使容器的行为类似于内联元素。


F
Flimm

为了清楚起见,改为使用二值显示语法

display CSS 属性实际上同时设置了两件事:外部显示类型和内部显示类型。外部显示类型会影响元素(充当容器)在其上下文中的显示方式。内部显示类型会影响元素的子项(或容器的子项)的布局方式。

如果使用双值 display 语法,这种语法仅在某些浏览器(如 Firefox)中受支持,则两者之间的区别会更加明显:

display:block 等价于 display:block 流

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 的元素将占据它可用的整个宽度,就像 <div> 一样。外部显示类型为 inline 的元素将仅占用它需要的宽度,并像 <span> 一样进行换行。

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

当未指定 flexgrid 时,内部显示类型 flow 是默认的内部显示类型。例如,这是我们在 <p> 中习惯的布局子元素的方式。 flexgrid 是布置孩子的新方式,每个孩子都应该有自己的职位。

结论:

display: flexdisplay: inline-flex的区别是外显类型,第一个外显类型是block,第二个外显类型是inline。它们都具有 flex 的内部显示类型。

参考:

mozzilla.org 上 CSS Display 属性的二值语法


为简单起见,我故意不讨论 flow-root,但如果您想了解更多信息,请阅读参考文章。
从来不知道,谢谢你清除它。我有一种爱恨交织的感觉,即基于你赋予单值语法的价值如何改变内在或外在的行为......
佚名

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

简短的回答:

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

更长的答案:

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

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

您可能遇到的问题

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

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

下面是一些示例来展示 flex 与 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


小提琴链接已失效。
N
Noor Jahan Mukammel

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

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

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

这会导致两个或多个 flex 容器一个接一个,显示为 inline-flex,在屏幕上并排对齐,直到占据整个屏幕宽度。


“将 flex 布局 [...] 应用于容器本身” [需要引用]
K
Konkret

您可以内联显示弹性项目,前提是您的假设是基于希望灵活的内联项目放在第一位。使用 flex 意味着一个灵活的块级元素。

最简单的方法是使用 flex 容器,其子项设置为 flex 属性。就代码而言,这看起来像这样:

.parent{
   display: inline-flex;
}

.children{
   flex: 1;
}

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

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

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

如果您使用第一个示例:

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

您可以使用浏览器控制台在 flexinline-flex 之间更改容器元素的 display


P
Pixel Rubble

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

Updated Fiddle

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


谢谢你的回答,但我知道我可以这样做。我只是误解了属性 display:inline-flex; - 我认为,这个属性是实现我的目标的更简单方法。但在最后几天之间,我了解到这个属性只会使容器内联显示。添加背景后,我现在看到了属性 display:inline-flex; 之间的区别。和显示:弹性;在一个弹性盒子里。 jsfiddle.net/vUSmV/101
J
Joshua Muheim

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

先来点背景。某些屏幕阅读器(如 NVDA)以不同方式处理 display: blockdisplay: inline-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: 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 还是 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: block 完全一样。

显示:inline-flex

令人惊讶的是,这个display: blockdisplay: inline-block

显示:网格/显示:内联网格

我没有对此进行测试,但我希望与这里的 flex / inline-flex 一样。

为什么这是个问题?

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

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

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

您现在希望在视觉上设置类别 (Rain forests) 与“真实”标题(“他们需要我们的爱”)非常不同的样式,即将每个类别放在自己的行中,如下所示:

https://i.stack.imgur.com/flRdg.png

如果您将类别设为 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