我使用flexbox作为我的布局,在完成Flexbox Froggy之后,我尝试得到以下对齐方式：
我的想法如下：
>框(< div>)需要在列中流动：flex-direction：column;
>它们自上而下对齐：align-content：flex-start;
>一个特定的盒子aligns itself到底部：align-self：flex-end;
Box1">
Box 1
Box2">
Box 2
Box3">
Box 3
用CSS
.container {
display: flex;
flex-direction: column;
align-content: flex-start;
}
.Box3 {
align-self: flex-end;
}
但它不起作用 – 看起来第三个盒子被推(弯曲端)到右边而不是底部.
我的理解是align-self处理相对于容器的异常(“容器从顶部对齐所有东西,但我,我自己,将对齐到底部”).不是这样吗？
最佳答案
您不需要使用align-self,您可以使用margin-auto执行此操作.
.container {
display: flex;
flex-direction: column;
align-content: flex-start;
height: 150px;
border:1px solid grey;
}
.Box3 {
margin-top: auto;
background:lightgreen;
}
