CSS 中的伪元素和弹性框答案

【问题标题】：Pseudo-elements and flexboxes in CSSCSS 中的伪元素和弹性框
【发布时间】：2018-08-20 22:33:24
【问题描述】：

我正在学习 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，因为它物有所值。

我们将不胜感激。

谢谢

【问题讨论】：

css-tricks.com/snippets/css/a-guide-to-flexbox 默认情况下，弹性项目都将尝试放在一行中。浮动或显示在弹性子项上没有效果;)

标签： css flexbox pseudo-element

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：