How to arrange 2 items per row using flexbox and CSS?

Spread the love

Sometimes, we want to arrange 2 items per row using flexbox and CSS.

In this article, we’ll look at how to arrange 2 items per row using flexbox and CSS.

How to arrange 2 items per row using flexbox and CSS?

To arrange 2 items per row using flexbox and CSS, we set the flex-basis property.

For instance, we write

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

to add nested divs.

Then we write

.item {
  width: 100%;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 50%;
  box-shadow: 0 0 0 1px black;
  margin-bottom: 10px;
}

to make the outer div a flex container with display: flex;.

Then we make the child divs take half the width of the parent div with flex: 50%;.

Conclusion

To arrange 2 items per row using flexbox and CSS, we set the flex-basis property.

Leave a Reply

Your email address will not be published. Required fields are marked *