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

Question

我使用flexbox作为我的布局，在完成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处理相对于容器的异常（＆＃34;容器从顶部对齐所有内容，但我，我自己将对齐到底部＆＃34; ）。不是吗？

Answer 1

您不需要使用align-self，您可以使用margin-auto执行此操作。

Flexbox's Best-kept secret

W3C Spec: Auto Margins

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果需要的话，更合适的方法是将容器的高度提高到百分比而不是像素。

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

.box3 {
  margin: auto 0;
}