我想创建一个四列布局,其中每个列随着窗口的大小而增长和缩小,但每个列都有最小宽度,并且当窗口过小无法容纳全部四列时,它将转换为单列布局,每个部分占据整个宽度。
我尝试使用flex-box或CSS网格来实现此功能,但都无法满足要求。同时,我希望不使用媒体查询来解决问题。虽然媒体查询很容易解决这个问题,但我不喜欢使用它们!
.col {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.section {
margin: 10px 0px 0px 10px;
min-width: 250px;
height: 400px;
background-color: gray;
flex: auto;
}
<div class="col">
<div class="section">
</div>
<div class="section">
</div>
<div class="section">
</div>
<div class="section">
</div>
</div>
这是一个 CodePen 示例:https://codepen.io/WriterState/pen/oRKxMj
。