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

Question

我flexbox用于我的布局,在完成Flexbox Froggy之后,我尝试得到以下对齐方式:

我的想法如下:

• boxes(<div>)需要在列中流动:flex-direction: column;
• 它们是自上而下的: align-content: flex-start;
• 一个特定的盒子将自己对齐到底部: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处理相对于容器的异常("容器从顶部对齐所有东西,但我,我自己,将对齐到底部").不是这样吗？

Answer 1

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

Flexbox 最好的秘密

W3C 规范：自动边距

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