使用flexbox将子元素聚集在div底部

Question

使用flexbox，我想让一个div的子元素坐在底部，第一个元素全宽，其余元素自动缩放大小和位置。但是当我尝试这样做时，第一个元素位于中间而不是底部。代码示例请见这里： http://jsbin.com/zomemonipi/edit?html,css,output。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-items: flex-end;
  box-sizing: border-box;
  border: 1px solid green;
}

.full-child {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid blue;
}

.partial-child {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}

.partial-child.one {
  flex-grow: 1;
}

<div class="container">
  <div class="full-child">a</div>
  <div class="partial-child one">b</div>
  <div class="partial-child two">c</div>
  <div class="partial-child three">d</div>
</div>

请看下面截图，注意蓝色的div居中显示，而不是紧贴在底部的红色元素旁边。如何才能达到我的期望效果，让这些元素聚集在div底部？

- steel

---

这是启用换行的容器中 flex 行的默认行为。您需要调整 align-content 属性。这里有一个完整的解释：https://dev59.com/wek5XIcBkEYKwwoY_O6N - Michael Benjamin

Answer 1

你应该使用 align-content 而不是 align-items，因为它的初始值是 stretch。这会沿着交叉轴对齐项，而在你的情况下，交叉轴是 y，因为方向是 row。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: flex-end;
  box-sizing: border-box;
  border: 1px solid green;
}
.full-child {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid blue;
}
.partial-child {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}

  <div class="container">
    <div class="full-child">a</div>
    <div class="partial-child one">b</div>
    <div class="partial-child two">c</div>
    <div class="partial-child three">d</div>
  </div>

- Nenad Vracar

Answer 2

做。

 align-content: flex-end;

那将影响相反轴上的定位。

.container {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  height: 300px;
  align-content: flex-end;
  box-sizing: border-box;
  border: 1px solid green;
}

.full-child {
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid blue;
}

.partial-child {
  height: 30px;
  box-sizing: border-box;
  border: 1px solid red;
}

.partial-child.one {
  flex-grow: 1;
}

<div class="container">
  <div class="full-child">a</div>
  <div class="partial-child one">b</div>
  <div class="partial-child two">c</div>
  <div class="partial-child three">d</div>
</div>

- Chava Geldzahler