Arrange 2 items per row using flexbox
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>
The below solution worked for me
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: 25%;
box-sizing: border-box;
}
Sample: https://codepen.io/capynet/pen/WOPBBm