使用 flexbox 每行排列 2 个项目 [英] Arrange 2 items per row using flexbox
本文介绍了使用 flexbox 每行排列 2 个项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
假设我有以下标记
<div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
和风格
.item {宽度:100%}
并且由于某些原因我无法改变宽度.item
我可以通过使用 flexbox 或任何其他方式设置父容器 .container
的样式,在每行中排列 2 个项目吗?
解决方案
你可以把 flex: 50%
给孩子 div
s 而不用碰 .item代码>
.item {宽度:100%}.容器 {显示:弹性;flex-wrap: 包裹;}.container >div {弹性:50%;/* 或 - flex: 0 50% - 或 - flex-basis: 50% - *//*演示*/框阴影:0 0 0 1px 黑色;底边距:10px;}
<div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div>
Imagine I have following markup
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
and style
.item {
width: 100%
}
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?
解决方案
You can give flex: 50%
to children div
s without touching .item
.item {
width: 100%
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 50%; /* or - flex: 0 50% - or - flex-basis: 50% - */
/*demo*/
box-shadow: 0 0 0 1px black;
margin-bottom: 10px;
}
<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屋!
查看全文