0

I have a flexbox with wrapped items:

.flex-container {
  padding: 0;
  margin: 0;
  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;
  width: 520px;
  height: 520px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-item {
  background: gold;
  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>
</ul>

https://jsfiddle.net/0v54s2Lz/1/

I'd like 5, 6, 7, and 8 to be right below 1, 2, 3, and 4. But there is a gap. Flexbox is, presumably, trying to equalize the "row" heights.

chirag
  • 1,761
  • 1
  • 17
  • 33
Coffee Bite
  • 4,956
  • 5
  • 33
  • 38

2 Answers2

2

You have to add

align-content: flex-start;

to your .flex-container.

.flex-container {
  padding: 0;
  margin: 0;
  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;
  width: 520px;
  height: 520px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  align-content: flex-start;
}

.flex-item {
  background: gold;
  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>
</ul>

https://jsfiddle.net/7LeL9mcd/

TylerH
  • 20,799
  • 66
  • 75
  • 101
ekiyanov
  • 441
  • 3
  • 19
-1

remove height: 520px; from .flex-container, here is updated fiddle

AG_
  • 2,589
  • 3
  • 20
  • 32