html– 如何在flexbox中对齐特定的特定内容？

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

我的想法如下：

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

这导致下面的HTML代码(也可在JSFiddle获得)

用CSS

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

但它不起作用 – 看起来第三个盒子被推(弯曲端)到右边而不是底部.

我的理解是align-self处理相对于容器的异常(“容器从顶部对齐所有东西,但我,我自己,将对齐到底部”).不是这样吗？

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