0

I have the below code,

.flex-container {
  padding: 20px;
  margin: 20px;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-evenly;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap li {
  background: gold;
}

.flex-item {
  border: 1px solid blue;
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>

My question is, How can I force only 3 boxes to fit on one row without changing their widths using flexbox? There should be only 3 boxes in one row and the rest of the space should be evenly distributed, i.e., I want to span 9 boxes in 3 rows, 3 boxes a row. How can I achieve it using flexbox?

Frosted Cupcake
  • 1,909
  • 2
  • 20
  • 42

3 Answers3

1

There are several hackish solutions, see here: https://stackoverflow.com/a/29733127/4796844. Sadly the only clean solution involving flexbox appears to be supported only by Firefox.

I recommend you using CSS Grid for that use case. Here is the great resource to learn it :)

.grid-container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;

  padding: 20px;
  list-style: none;
  border: 1px solid silver;
}

.grid-container li {
  background: gold;
}

.grid-item {
  border: 1px solid blue;
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
<ul class="grid-container">
  <li class="grid-item">1</li>
  <li class="grid-item">2</li>
  <li class="grid-item">3</li>
  <li class="grid-item">4</li>
  <li class="grid-item">5</li>
  <li class="grid-item">6</li>
  <li class="grid-item">7</li>
  <li class="grid-item">8</li>
  <li class="grid-item">9</li>
</ul>

Its support across the browsers is very satisfactory. You can check it here.

radzak
  • 2,986
  • 1
  • 18
  • 27
0

Add flex-basis: 33% its supported by all browsers, then use calc method to remove the margin and padding in between the boxes.

Check my code:

.flex-container {
  padding: 20px;
  margin: 20px;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-evenly;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.wrap li {
  background: gold;
}

.flex-item {
  border: 1px solid blue;
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  flex-basis: calc(33.3% - 32px);
}
<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
  <li class="flex-item">9</li>
</ul>
Adam
  • 1,385
  • 1
  • 10
  • 23
-1

If you want the boxes fixed to 100px you could set:

.wrap { flex-wrap: wrap; width: calc(120px * 3 + 40px); }

i.e.

width * num of boxes + wrapper padding

Which would consistently wrap the boxes - it's not really a flex box solution, but would work for your scenario.

theleebriggs
  • 571
  • 2
  • 5