1

The first row in this flex setup will align start, but for some reason the second row aligns centrally into the available space. Fiddle here

.container {
  height: 370px;
  width: 290px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  background-color: rgba(0, 100, 0, 1);
  border: .1em solid white;
  box-sizing: border-box;
  padding: .5em .4em;
  font-size: 1em;
  overflow: scroll;
}

.child {
  position: relative;
  align-items: flex-start;
  height: 74px;
  width: 58px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align: center;
  color: rgba(255, 255, 255, 0.2);
}
<div class="container">
  <div class="child">8</div>
  <div class="child">9</div>
  <div class="child">10</div>
  <div class="child">11</div>
  <div class="child">13</div>
  <div class="child">14</div>
</div>
Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
denski
  • 1,578
  • 3
  • 15
  • 31
  • Use `align-content` instead of `align-items` in your flex-container for multi-line flexible boxes. – Ricky Mar 17 '17 at 17:28
  • @ricky, I didn't find the other one `align-content` in my research because I thought `align-items` did that job thanks for spotting the mistake. If you put it as an answer I'll accept. – denski Mar 17 '17 at 17:57
  • It's okay, no need for an answer, any user having the same problem should head to the dupe. Cheers. – Ricky Mar 17 '17 at 18:04
  • Ah ok, perfect. – denski Mar 17 '17 at 18:11

0 Answers0