flex布局

flex布局中存在两个重要的概念，一个是轴，一个是容器

轴

image.png

如上图所示，轴又分为主轴和交叉轴两个部分。

1. 主轴
   justify-content属性决定了子容器沿着主轴的排列方向，而主轴的方向又是有flex-direction属性决定的。
   主轴的开始端由flex-start表示，结束端由flex-end表示。
2. 交叉轴
   【交叉轴方向为从左到右或者从上到下】，起始端由flex-start表示，结束端由flex-end表示
   因此当flex-direction定下的时候，主轴与交叉轴的方向就已经确定下来了。
   flex-direction总共有4个值
3. row，默认值，从左向右
4. column，从上向下
5. row-reverse，从右向左
6. column-reverse，从下向上

容器

容器存在这样的特点，父容器可以设置子容器的排列方式，子容器也可以设置自己的排列方式，如果子容器设置了则以子容器为准。

1. 父容器

• 设置子容器沿主轴排列【justify-content】
  【flex-start】起始端对齐
  【center】居中
  【flex-end】末尾端对齐
  【space-around】首尾的间距是其他的一半
  【space-between】首尾与父容器相切
• 设置子容器沿交叉轴排列【align-items】
  【flex-start】起始端对齐
  【flex-end】末尾端对齐
  【center】居中
  【baseline】沿着首行文字的基线对齐
  【stretch】沿着交叉轴方向拉伸至于父容器高度相同

2. 子容器
   在主轴上如何伸缩【flex】
   在交叉轴上如何排列【align-self】，与align-items一致，只不过是在子容器上设置

flex进阶

1. 父容器

• 设置换行【flex-wrap】
  【wrap】
  【nowrap】
  【wrap-reverse】逆序换行，指的是沿着交叉轴的反方向换行
• 轴向与换行的复合属性【flex-flow=flex-direction+flex-wrap】
  【row wrap】
  【column nowrap】
• 设置多行沿交叉轴的对齐方式【align-content】
  【flex-start】起始端对齐
  【center】居中
  【flex-end】末尾端对齐
  【space-around】均匀分布
  【space-between】首尾两端相切
  【stretch】拉伸对齐

2. 子容器

• 设置基准大小【flex-basis】，主轴为横向时代表宽度，主轴为纵向时代表高度
• 设置扩展比例【flex-grow】，在flex-basis的基础上，剩余部分按照比例分
• 设置收缩比例【flex-shrink】，在flex-basis的基础上，超出部分按照比例收缩
• 设置子容器顺序【order】，默认值为0，可以为负值，值越小排越前