【css面试题】弹性盒布局模型 flex 全部知识点整理

一、基本语法

1. flex-basis 
   1. 在分配多余空间之前，占据的主轴空间，相当于 width
2. flex-grow
   1. 定义项目的放大比例(存在剩余空间是否放大)
   2. 默认为0 （即如果存在剩余空间也不放大）
3. flex-shrink
   1. 定义项目的缩小比例（空间不足，是否进行缩小）
   2. 默认为1（即如果空间不足，就将该项目缩小）
4. flex-wrap
   1. 展示不全，换行展示
5. flex 复合属性
   1. flex-grow flex-shrink flex-basis 的缩写，顺序不能变
6. flex: auto
   1. flex: 1 1 auto 的缩写
   2. 可以方法，可以缩小，默认尺寸自动，弹性十足！！
   3. 多用于内容固定，但是数量不固定的，比如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用flex:auto效果来实现
7. justify-content: 列表的水平对齐方式
   1. space-between 两端对齐

二、使用

1. 改变元素的顺序
   1. order 属性

三、适用场景

1. 屏幕尺寸自适应 / 响应式布局
2. 等高的多列布局
3. 水平和垂直居中
4. 等间距的分布