一、基本语法
- flex-basis
- 在分配多余空间之前,占据的主轴空间,相当于 width
- flex-grow
- 定义项目的放大比例(存在剩余空间是否放大)
- 默认为0 (即如果存在剩余空间也不放大)
- flex-shrink
- 定义项目的缩小比例(空间不足,是否进行缩小)
- 默认为1(即如果空间不足,就将该项目缩小)
- flex-wrap
- 展示不全,换行展示
- flex 复合属性
- flex-grow flex-shrink flex-basis 的缩写,顺序不能变
- flex: auto
- flex: 1 1 auto 的缩写
- 可以方法,可以缩小,默认尺寸自动,弹性十足!!
- 多用于内容固定,但是数量不固定的,比如导航数量不固定,每个导航文字数量也不固定的导航效果就适合使用flex:auto效果来实现
- justify-content: 列表的水平对齐方式
- space-between 两端对齐
二、使用
- 改变元素的顺序
- order 属性
三、适用场景
- 屏幕尺寸自适应 / 响应式布局
- 等高的多列布局
- 水平和垂直居中
- 等间距的分布