如何以不同方式对齐 flexbox 中的特定 <div>？

Question

我使用 flexbox for my layout and after completing Flexbox Froggy 我试图获得以下对齐方式：

我的想法是这样的：

盒子（<div>）需要在一列中流动：flex-direction: column;
它们自上而下对齐：align-content: flex-start;
一个特定的框 aligns itself 到底部：align-self: flex-end;

这导致下面的 HTML 代码（也可在 JSFiddle 上找到）

<div class="container">
  <div class="box1">
    box 1
  </div>
  <div class="box2">
    box 2
  </div>
  <div class="box3">
    box 3
  </div>
</div>

与CSS

.container {
  display: flex; 
  flex-direction: column;
  align-content: flex-start;
}
.box3 {
  align-self: flex-end;
}

但它不起作用 - 看起来第三个框被推 (flex-end) 到右边而不是底部。

我的理解是align-self处理了一个相对于容器的异常（"the container aligns everything from the top, but I, myself, will align to the bottom"）。不是吗？

Answer 1

您不需要使用 align-self，您可以使用 margin-auto。

Flexbox's Best-kept secret

W3C Spec: Auto Margins

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  height: 150px;
  border:1px solid grey;
}
.box3 {
  margin-top: auto;
  background:lightgreen;
}

<div class="container">
  <div class="box1">
    box 1
  </div>
  <div class="box2">
    box 2
  </div>
  <div class="box3">
    box 3
  </div>
</div>

Answer 2

更合适的方法是以百分比而不是像素为您的容器指定高度，如果您需要的话。

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  height: 100%;
}

.box3 {
  margin: auto 0;
}

如何以不同方式对齐 flexbox 中的特定 <div>？

How to align differently a specific <div> in flexbox?

html

css

flexbox