一、认识flex布局
- flexbox：弹性盒子
- 弹性盒子是一种用于按行或按列布局元素的一维布局方法
- 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
- 通常我们使用flexbox来进行布局的方案称之为flex布局
- flex布局是目前web开发中使用最多的布局方案
二、flex布局的理解
1. flex-container
- 开启了flex布局的元素叫flex container
- 设置display属性为flex或者inline-block可以成为flex container
- flex：flex container以block-level形式存在
- inline-block：flex container以inline-level形式存在
2. flex-item
- flex container里面的子元素叫做flex item
- flex item的布局将受flex container属性的设置来进行控制和布局
- flex item不再严格区分块级元素和行内级元素
- flex item默认情况下是包裹内容的，但是可以设置宽高
3. flex布局的模型
- main axis --- 主轴
- cross axis --- 交叉轴
- flex items默认都是沿着主轴从main start开始往main end方向排布
三、flex-container属性
1. flex-direction
flex-direction决定了主轴的方向
- row：默认值，行为主轴的方向
- row-reverse：行主轴进行反转
- column：列为主轴的方向
- column-reverse：列主轴的反转
2. flex-wrap
flex-wrap决定了flex container是单行还是多行
- nowrap：默认值，单行
- wrap：多行
- wrap-reverse：多行（对比wrap，cross start和cross end相反）
3. flex-flow
flex-flow是flex-direction和flex-wrap的缩写
- 顺序任意，且都可以省略
4. justify-content
justify-content决定了flex items在主轴的对齐方式
- flex-start：默认值，与main start对齐
- flex-end：与main end对齐
- center：居中对齐
- space-between：flex items之间的距离相等；与main start、main end两端对齐
- space-around：flex items之间的距离相等；与main start、main end之间的距离是flex items之间距离的一半
- space-evenly：flex items之间的距离相等；与main start、main end之间的距离是flex items之间的距离
5. align-items
align-items决定了flex items在交叉轴的对齐方式
- normal：在弹性布局中，效果与stretch一样
- stretch：当flex items在交叉轴方向的size为auto时，会自动拉伸填充至flex container
- flex-start：与cross start对齐
- flex-end：与cross end对其
- center：居中对齐
- baseline：与基准线对齐
6. align-content
align-content决定了多行flex items在交叉轴上的对齐方式
- stretch：默认值
- flex-start：与cross start对齐
- flex-end：与cross end对其
- center：居中对齐
- space-between：flex items之间的距离相等；与cross start、cross end两端对齐
- space-around：flex items之间的距离相等；与cross start、cross end之间的距离是flex items之间距离的一半
- space-evenly：flex items之间的距离相等；与cross start、cross end之间的距离是flex items之间的距离
四、flex-item属性
1. order
- 决定了flex items的排布顺序
- 可以设置任意整数，默认值为0
- 值越小就越排在前面
2. align-self
- 可以覆盖flex container设置的align-items
- auto：默认值，遵从flex container的align-item
- stretch、flex-start、flex-end、center、baseline，效果与align-items一致
3. flex-grow
- 决定了flex items如何扩展
- 可以设置任意非负数字，默认值是0
- 当flex container在主轴方向有剩余size时，flex-grow属性才会有效
4. flex-shrink
- 决定了flex items如何收缩
- 可以设置任意非负数字，默认值是1
- 当flex items在主轴方向超过了flex container的size，flex-shrink属性才会有效
5. flex-basis
- 用来设置flex items在主轴方向上的base size
- auto（默认值）、具体的宽度数值
6. flex
- 是flex-grow、flex-shrink、flex-basis的简写
