Question

我有一个有3个孩子的弹性容器，我想确保孩子们都在flex-start对齐，但是最后的孩子应该坐在容器的底部。

是否无法将align-content与align-self合并？

＆＃13;

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 15px 15px 50px 15px;
    height: 100%;
    background: red;
    width: 200px;
    height: 500px;
}

.item-1,
.item-2,
.item-3 { width: 100%; }

.item-3 {
    align-self: flex-end;
}

＆＃13;

<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
</div>

＆＃13;

Answer 1

由于你想要100％宽度的元素，你可以切换到列方向然后使用margin来控制对齐：

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  padding: 15px 15px 50px 15px;
  height: 100%;
  background: red;
  width: 200px;
  height: 300px;
}

.item-3 {
  margin-top: auto;
}

＆＃13;

<div class="container">
  <div class="item-1">One</div>
  <div class="item-2">Two</div>
  <div class="item-3">Three</div>
</div>

＆＃13;

Flex：在flex-start中对齐所有孩子，但强迫一个孩子结束？

1 个答案: