css - CSS 中的伪元素和弹性框
问题描述
我正在学习 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 来获得它的价值。
任何见解将不胜感激。
谢谢
解决方案
您正在使用 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>
推荐阅读
- excel - 在 VBA 中选择固定列
- c++ - Omnet 和 Inet 链接错误:未定义对 typinfo 的引用
- java - 如何在没有类型的变量上调用函数?
- django - 使用工厂男孩为数据库中的字段指定多个变体
- oauth-2.0 - 如何处理移动应用程序的重定向 url - 使用 PKCE 的 OAuth 2.0 授权代码流
- android - 由于包含使用不受支持的插件版本的 Kotlin 模块,因此不支持新的 Gradle Sync(更改)
- c - 我的多播服务器只能接收来自同一子网上的发件人的消息
- delphi-10-seattle - 将应用程序窗口发送到后台
- python - 从数据框中随机选择小时
- arrays - 无法迭代字典数组,因为它说“键入'Any'的值没有下标”