<分区>
css - 单个 "column"中的全宽 flex 元素
我有一个简单的 flexbox 设置，其中元素具有固定宽度，并在需要时很好地换行到下一行:
但是，当父元素宽度足够小并且元素都出现在一列中时，元素右侧的空白看起来会很别扭:
有没有一种简单的方法可以保持第一个屏幕截图中的行为，但在单个“列”中让元素填充父元素的整个宽度？据我所知，我不能使用媒体查询，因为我需要相对于特定父元素而不是整个屏幕宽度的东西。在单列的情况下，事情看起来像这样:
示例代码如下:
.cont {
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.item {
flex: 0 1 auto;
width: 200px;
height: 50px;
border: 1px solid black;
background: red;
margin-right: 10px;
margin-bottom: 10px;
}<div class="cont">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>最佳答案
在媒体查询中添加此样式
@media screen and (max-width: 480px) {
.item {
width: 100%;
}
}
.cont {
display: flex;
flex-wrap: wrap;
overflow: auto;
}
.item {
flex: 0 1 auto;
width: 200px;
height: 50px;
border: 1px solid black;
background: red;
margin-right: 10px;
margin-bottom: 10px;
}
@media screen and (max-width: 480px) {
.item {
width: 100%;
}
}<div class="cont">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>关于css - 单个 "column"中的全宽 flex 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50932294/