Flexbox: each element 1/3 width, fall under each other if not enough space

Question

I am looking for a way (with Flexbox, not Grid) to create a layout, when I have a container with x cards inside, and each card inside should take 1/3 of the container width. So cards number 1,2,3 will be in the first row, cards number 4,5... in the second row etc. I feel like it is impossible with flexbox, I don't wanna do some checks for number of items, I used map to map cards in containers of max 3 cards but I didn't like the solution. Before I move to using grid, I would love to get some insight if it is possible to acomplish with Flexbox. The code is:

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

Post the CSS you tried please. And have you tried setting the card to 33% width with flex-wrap set to wrap? — j08691, Aug 20 '21 at 13:26

score 2 · Answer 1 · answered Aug 20 '21 at 13:39

you should set box-sizing: border-box; on the cards so padding and borders are calculated in their width. and set their max-width: 33.33%.

body {
  padding: 30px;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  background: orange;
}

.card {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  max-width: 33.33%;
  padding: 50px 0;
  background-color: aqua;
  border: 1px solid #000;
}

<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
</div>

Nitheesh · Answer 2 · 2021-08-20T13:41:21.893

The difference will be for the second row. There are two options for the last two element width.

Option 1 Last two nodes take 33% width only and leave the right side blank.

You have to use display: flex; flex-wrap: wrap; for .container and display: flex; flex: 0 1 33%; for the child element, which is .card.. Here flex-shrink is to be set for child

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

.card {
  height: 100px;
  display: flex;
  flex: 0 1 33%;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}

<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
</div>

Option 2 Last two element use 50% width each. You have to use display: flex; flex-wrap: wrap; for container and display: flex; flex: 1 0 33%; to the child element, which is .card. Here flex-grow is to be set for child

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

.card {
  height: 100px;
  display: flex;
  flex: 1 0 33%;
  justify-content: center;
  align-items: center;
  font-size: 50px;
}

<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
</div>

score -2 · Answer 3 · answered Aug 20 '21 at 13:34

-2

Flex-wrap can help you with that

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

.card{
  min-width: 33.3333%;
}

Example here: https://codepen.io/jriches/pen/WNjVaav

answered Aug 20 '21 at 13:34

Jacob Riches

177
8

will not work as intended as `min-width` will make it aleast that width. Mean, if the content is big enough, they layout will be easily broken as the width can be larger then 33.33%. – tacoshy Aug 20 '21 at 14:34

score -3 · Answer 4 · answered Aug 20 '21 at 13:26

-3

Use 33.33333333% width in your card class.

answered Aug 20 '21 at 13:26

Foysal imran

111
1
11

`33.33%` is more then enough. Betetr yet would be: `calc(1/3)`. However this will not work as intended as it misses 2 fundemental things: `box-sizing: border-box;` and `flex-wrap: wrap;` – tacoshy Aug 20 '21 at 14:33

Flexbox: each element 1/3 width, fall under each other if not enough space

4 Answers4