Flexbox第二行不会对齐第一行的底部?

时间:2017-03-17 16:57:43

标签: html css flexbox

此flex设置中的第一行将对齐start,但由于某种原因,第二行会集中对齐可用空间。小提琴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>

0 个答案:

没有答案