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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐