flex布局属性有哪些？

日期: 2025-10-12 阅读: 17603

flex有6个属性
1. flex-direction:row、column、row-reverse、column-reverse
2. justify-content:

1). flex-start主轴前对齐
2). flex-end 后对齐
3). center 居中
4). space-between 等距首尾
5). space-around 等距两边
6). space-evenly 等距容器

3. align-items

1). flex-start交叉轴前对齐
2). flex-end 后对齐
3). center 居中
4). baseline 文字基线对其
5). stretch拉伸(元素登高)

4. flex-wrap

1). wrap 换行
2). nowrap不换行
3). wrap-reserve 行序反向

5. align-content 定义了多行项目在交叉轴的对齐方式

1). flex-start 顶部对齐
2). flex-end 底部对其
3). center 居中
4). stretch 垂直拉伸占满
5). space-between 首位对齐占满高度
6). space-around 间隔相等并占满高度

项目属性：
1. order，如：order:1;order:2;order:3;项目排序
2. align-self:flex-end;定义某个元素的交叉轴对其方式
3. flex包含：flex-grow(按容器剩余空间比例放大元素填充容器)、flex-shrink（按被挤压空间的比例缩小元素）、flex-basis（元素初始大小）

上一个 ：如何阅读 BuildAdmin 的 PHP 源码

下一个 ：暂无