使用flexbox每行安排2个项目 [英] Arrange 2 items per row using flexbox
本文介绍了使用flexbox每行安排2个项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我有以下标记
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
和样式
.item {
width: 100%
}
,由于某些原因,我无法更改
.item
的宽度。我可以在其中安排2个项目吗?通过使用flexbox或其他方式设置父容器 .container
的样式来排每一行?
and due to certain reasons I can't change the width of the
.item
Can I arrange 2 items in each row by styling parent container .container
, using flexbox or any other way?
推荐答案
您可以将 flex:0 0 50%
分配给儿童div,而无需触摸。项目
you can give flex: 0 50%
to children divs without touching .item
.item {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container>div {
flex: 0 50%;
/*demo*/
border: red solid;
box-sizing:border-box
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
这篇关于使用flexbox每行安排2个项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文