flex布局纵向排列右对齐

flex布局的对齐方式分为主轴方向和交叉轴方向,默认主轴为横向即

flex-direction:row;

需要使布局方向纵向需要设置为,设置后主轴为纵向,交叉轴为横向

flex-direction:column;

布局盒子中的项的排列方式设置时也要注意其应用的轴。
用于设置在主轴上项目对齐:
justify-content:
在这里插入图片描述
设置在交叉轴上项目对齐:
align-items:
在这里插入图片描述
实现项目右对齐,则需要在设置交叉轴上。最终代码如下

 .study-info-left {
       display:flex;
       flex-direction:column;
       align-items: flex-end;
    }
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐