[英]Two divs side by side with flex
我在笔记本电脑模式下有 4 个单元格当我想在电话模式下并排放置两个单元格时,我必须移除外部 div 中的 flex 但我不能再拥有自动高度 div 。 如何解决这个问题
<div class="box">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
CSS
.box {
height: auto;
padding: 50px;
background-color: red;
}
.row {
display: flex;
}
.cell {
float: right;
width: 50%;
height: 50px;
}
您必须使用另外 2 个 css 属性,flex 和 flex-wrap。
为了确保当屏幕太小时单元格换行到下一行,您必须将属性flex-wrap : wrap
到 row 类。
然后你需要为单元格定义一个flex
属性。
flex
属性是这样定义的
flex : flex-grow flex-shrink flex-basis;
flex-grow 和 flex-shrink 是增长和收缩系数。 在这里,所有单元格必须具有相同的宽度,所以我们不关心这个值(我已经将这些设置为 1)。 flex-basis 表示单元格的默认宽度
这是一个例子:
.box { height: auto; padding: 50px; background-color: red; } .row { display: flex; flex-wrap:wrap; } .cell { flex: 1 1 200px; height: 50px; border:1px solid black; background-color: blue; }
<div class="box"> <div class="row"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.