Arrange 2 Items Per Row Using Flexbox

Arrange 2 items per row using flexbox

You can give flex: 50% to children divs 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>

How to display 2 columns per row using flexbox

The best way to achieve this layout would be with Grid CSS:

.flex {  display: grid;  grid-auto-flow: column;  grid-gap: 20px;  grid-template-rows: 100px 100px;  grid-template-columns: 100px 100px;  padding: 10px;}
.box {  padding: 20px;  border: 1px solid black;}
.red {  background-color: red;}
.yellow {  background-color: yellow;}
.blue {  background-color: blue;}
.green {  background-color: green;}
* {  box-sizing: border-box;}

<div class="flex">  <div class="box green">positive 1</div>  <div class="box yellow">positive 2</div>  <div class="box blue">positive 3</div>  <div class="box red">negative 1</div></div>

Flexbox - Cater for 2,3 or 1 items per row

you can use flex-basis along with flex-grow: 1 for that:

.grid3 {    display: flex;    flex-wrap: wrap;}
.grid3-item {    flex: 1 0 33%;    text-align: center;    border: 1px solid red;    box-sizing: border-box}

<div class="grid3">    <div class="grid3-item">Some Content</div>    <div class="grid3-item">Some Content</div>    <div class="grid3-item">Some Content</div>    <div class="grid3-item">Some Content</div>    <div class="grid3-item">Some Content</div></div>

How to display a decreasing number of images per row

You can use flexbox and flex like below:

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

.gallery > img {
  flex: calc(100%/3); /* 3 images per row */
  min-width: 0;
  outline:1px solid red;
}
/* until the 9th 4 images per row */
.gallery > :nth-child(-n + 9) {
  flex: calc(100%/4);
}
/* until the 5th 5 images per row */
.gallery > :nth-child(-n + 5) {
  flex: calc(100%/5);
}

<div class="gallery">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
 <img src="https://picsum.photos/id/1058/400/200">
 <img src="https://picsum.photos/id/1018/400/200">
 <img src="https://picsum.photos/id/1016/400/200">
</div>

How to display 3 items per row in flexbox?

Flex container:

• You probably want to use display: flex not inline-flex.
• Add flex-wrap: wrap to allow wrapping onto multiple lines.
• Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

• flex-basis: 33.333333%
• You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li {  list-style: none;  flex: 0 0 33.333333%;}

<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>

---

Related Topics