Question

请查看以下代码：

.header {
  display: flex;
  width: 100vw;
  height: 20vh;
}

div {
  border: solid;
}

#first {
  flex: 1
}

#second {
  flex: 1
}

#third {
  flex: 1
}

<header class="header">
  <div id="first"></div>
  <div id="second"></div>
  <div id="third"></div>
</header>

这段代码给出了三个彼此相邻的矩形。
但是，如果您检查每个矩形，就会在开发工具中看到

这些矩形具有display: block。

但是，我知道，当一个元素具有display: block属性时，这意味着该元素开始新的一行。如您所见，事实并非如此。所有三个矩形都放在同一行中。

你怎么解释这个？

Answer 1

但是，我知道当一个元素具有display：block属性时，它意味着该元素开始新的一行。

您的信息是错误的，因为仅display属性不会告诉我们是否要换行。

让我们再举一个没有flexbox的例子：

.box {
  width:200px;
  height:200px;
  border:2px solid;
  float:left;
}

<div class="box">

</div>
<div class="box">

</div>

您可以清楚地注意到，元素的计算值display等于block，但是由于float属性，它们并未从新行开始。 flexbox，CSS网格，position：absolute和其他许多属性组合也会发生同样的事情。

所有这些都在规范中定义。

对于浮点元素：https://www.w3.org/TR/CSS21/visuren.html#floats

如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动的框，则对于每个这样的较早框，当前框的左外边缘必须在右侧较早的盒子的右外边缘的高度，或者它的顶部必须低于较早的盒子的底部。类似的规则适用于右浮动框。

对于flexbox：https://www.w3.org/TR/css-flexbox-1/

弹性项目的显示值已被阻止：...

flex-direction属性通过设置flex容器的主轴方向来指定 flex物品在flex容器中的放置方式。这确定了弹性项目的布置方向。

默认方向为row

您只需要查找规范中与属性有关的部分，以查找元素在文档中的放置方式，您将清楚地看到仅凭display不足以定义此内容

Answer 2

您的容器div设置为显示为flex-因此它的所有子级都将从父级继承显示模式（因此，以内联方式显示）。您可以通过指定flex-direction来设置它们的显示方式。将其设置为显示为column将使所有子元素都显示在另一个元素之下。

.header {
  display: flex;
  width: 100vw;
  height: 20vh;
  /* Add this */
  flex-direction:column;
}
div {
  border: solid;
}
#first {
  flex:1
  
}
#second {
  flex:1
}
#third {
  flex:1
}

<body>
    <header class="header">
      <div id="first"></div>
      <div id="second"></div>
      <div id="third"></div>
    </header>
  </body>

Answer 3

嗨，这是因为标题显示为flex。如果显示flex，则其所有子项都将显示在一行中。您可以通过添加flex-direction来更改：列或行（默认情况下）

Answer 4

显示：flex 告诉您的浏览器，“我想在此容器中使用flexbox”。 div元素默认为display：box。
具有此显示设置的元素会占用行。这是父级中四个彩色div的示例使用默认显示设置的div：

CSS：元素具有“显示：阻止”并且不会开始新行

4 个答案: