flex布局
图标文字上下对齐
display: flex;
flex-direction: column;
justify-content: space-between;
父级display:flex
底部对齐
.aabbc {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
- flex-direction: column-reverse; */ //主轴 纵向
- justify-content: space-between;
- align-items: flex-end; //底对齐 横向
}
![](https://img2020.cnblogs.com/blog/2002986/202101/2002986-20210109163354088-1515065340.png)
两端对齐
父级
.zcgg_sy .sy_xinwen {
align-items: center;
display: flex;
justify-content: space-between;
}
底对齐
display: flex;
justify-content: space-between;
align-items: flex-end;
![](https://img2020.cnblogs.com/blog/2002986/202101/2002986-20210120182130707-1516474362.png)
display: flex;
justify-content: flex-end; /* 左右最末 */
align-items: center; /* 上下剧中 */
height: 100%;
}