弹性盒子布局属性有哪些请简述

• 父元素:

o 主轴方向 flex-direction

1. row 主轴从左向右默认值

18

2. row-revese 主轴从右向左

3. column 主轴从上到下

4. column-reverse 主轴从下到上

o 主轴方向排列方式 justify-content

1. flex-start 主轴起点默认值

2. flex-end 主轴终点

3. center 居中

4. space-between 两端对齐

5. space-around 中间的留白是两边的 2 倍

6. space-evenly 平均分配留白

o 交叉轴排列方式 align-items

1. stretch 拉伸默认值去掉子元素的高度

2. flex-start 交叉轴的起点

3. flex-end 交叉轴的终点

4. center 居中

o 换行 flex-wrap

1 .nowrap 不换行,默认值，会将子元素压缩

2 .wrap 换行

3. wrap-reverse 反向换行

o 多行之间的排列方式 align-content

1. stretch 拉伸默认值需要去掉子元素的高

2. flex-start 主轴起点依次排列

3. flex-end 主轴终点依次排列

4. center 居中

5. space-between 两端对齐

6. space-around 中间的两端的 2 倍

7. space-evenly 平均分配

• 子元素:

o 重写子项对应的交叉轴的对齐方式 align-self

1 .stretch 拉伸默认值去掉子元素的高度

2. flex-start 交叉轴的起点

3. flex-end 交叉轴的终点

4. center 居中

5. 放大 flex-grow

6. 0不放大

7. 数值填充剩余的空间

o 压缩 flex-shrink

1. 1压缩

2. 0不压缩

3. 实现导航的滚动效果

a. 子项的宽度超出了父容器的宽度

b. 设置子项不压缩 flex-shrink:0;

c. 父元素设置溢出显示滚动条 overflow-x:auto;

o 子项的宽度 flex-basis:数值+px 类似于宽度

                              19

o 排序 order 数值值越大越向后，可以设置负数