1.解决方案

align-self: baseline;

2.原因
元素设置flex-direction:column;时,默认align-self:stretch;

3.align-self属性
stretch:元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。

baseline:元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐