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”出现在新行中，因为它是一个块级元素。但是，它显示为内联-在div行的末尾。

我正在使用firefox 52.7.4来实现它的价值。

任何见解都会受到赞赏。

谢谢

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>

Answer 2

伪元素不存在于其后附加元素的边界框之外。如果您检查元素，则会看到::after元素中出现了<div class="flexbox">。

CSS中的伪元素和flexbox

2 个答案: