Flexbox second row won't align to bottom of first row?

Asked Mar 17 '17 at 16:57

Active Mar 17 '17 at 17:57

Viewed 26 times

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>

edited Mar 17 '17 at 17:57

Michael Benjamin

346,931
104
581
701

asked Mar 17 '17 at 16:57

denski

1,768
4
17
35

Use `align-content` instead of `align-items` in your flex-container for multi-line flexible boxes. – Ricky Ruiz 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 Ruiz Mar 17 '17 at 18:04
Ah ok, perfect. – denski Mar 17 '17 at 18:11

Flexbox second row won't align to bottom of first row?

0 Answers0