Css flex布局

Dear热热

已于 2022-06-18 16:55:05 修改

阅读量414

点赞数

分类专栏： CSS 文章标签： css

于 2019-10-26 22:08:33 首次发布

本文链接：https://blog.csdn.net/weixin_45414972/article/details/102761878

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


X轴方向的排列方式
justify-content: flex-start;    从左到右
justify-content: flex-end;    从右到左
justify-content: center;    居中
justify-content: space-around;    均匀分布（间距不一样）
justify-content: space-evenly;    均匀分布（间距一样）
justify-content: space-between;    均匀分布（左右两边无缝隙）

Y轴方向的排列方式
align-items: flex-start;    顶部对齐
align-items: flex-end;    底部对齐
align-items: center;        居中
align-items: stretch;    子盒子自动拉伸（未设置高度）
align-items: baseline;    文字对齐

修改X轴方向
align-items: baseline;    从左到右
flex-direction: row-reverse;    从右到左
flex-direction: column;    从上到下
flex-direction: column-reverse;    从下到上

flex换行
flex-wrap: wrap;    换行
flex-wrap: nowrap;    不换行
flex-wrap: wrap-reverse; 反向换行
align-content: flex-start;    换行（顺序）
align-content: flex-end;    反响换行（顺序）
align-content: center;    居中（顺序）
align-content: space-between;均匀分布换行