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