使用flexbox在div底部集群子元素

Question

使用flexbox，我希望div的子元素位于底部，第一个元素是全宽，剩下的是元素/位置。但是，当我尝试这样做时，第一个元素位于中间而不是底部。小提琴here。

＆＃13;

＆＃13;

function myFunc(a: string, b: number) { /* ... */ }

function callFn(passedFn: (args...: any[]), ...args: any[]) {
  passedFn(...args)
}

callFn(myFunc, 1, 2) // should be a warning

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

请注意下面的截图中蓝色div如何位于中间，而不是紧贴底部的红色元素。

如何获得我想要的行为，其中元素在div的底部聚集在一起？

Answer 1

您应使用align-items而不是align-content，因为初始值为stretch。由于cross-axis方向，这会定位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>

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>