css - CSS 中的伪元素和 flexboxes

Question

我正在学习 CSS，但是我看到了一些我不理解的东西。我基本上是在做以下事情:

.flexbox {
  display: flex;
}

div.flexbox::after {
  display: block;
  content: "X";
}

.item {
  flex: 1;
  height: 200px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<div class="flexbox">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
</div>

鉴于“X”是 block 级元素，我希望它出现在新行上。但是，它显示为内联 - 在 div 行的末尾。

我使用 firefox 52.7.4 是为了它的值(value)。

如有任何见解，我们将不胜感激。

谢谢

Answer 1

您正在使用 flexbox，默认行为是 nowrap .然后您应该指定任何 width 或 flex-basis 使子元素的总宽度超过其容器的宽度以便换行。

display:block 在这种情况下将不起作用，您需要考虑 flex 属性以强制换行。

这是一个例子:

.flexbox {
  display: flex;
  flex-wrap:wrap;
}

div.flexbox::after {
  content: "X";
  flex-basis:100%;
}

.item {
  flex:1 0 30%;
  height: 200px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

<div class="flexbox">
  <div class="item red"></div>
  <div class="item blue"></div>
  <div class="item green"></div>
</div>