95_css笔记11_css的伸缩流布局（flex布局）

一，伸缩布局的使用

1. main axis：主轴
2. main start：主轴开始位置
3. main end：主轴结束位置
4. main size：主轴空间
5. cross axis：交叉轴
6. cross start：交叉轴开始位置
7. cross end：交叉轴结束位置
8. cross size：交叉轴空间
9. 

• 一般使用：display: flex;
• Webkit 内核的浏览器：display: -webkit-flex;

二，父容器的6个特性

1. flex-direction：主轴的方向。

   1.  flex-direction: row;                // 默认值，主轴为水平方向，起点在左端。
   2.   flex-direction: row-reverse;        // 主轴为水平方向，起点在右端。
   3.   flex-direction: column;             // 主轴为垂直方向，起点在上。
   4.   flex-direction: column-reverse;     // 主轴为垂直方向，起点在下。

2. flex-wrap：超出父容器子容器的排列样式。

   1. flex-wrap: nowrap; // 默认，不换行
   2. flex-wrap: wrap; // 换行，第一行在上方。
   3. flex-wrap: wrap-reverse // 换行，第一行在下方。

3. flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。

   1. 默认值为 row nowrap
   2. flex-flow: <flex-direction> || <flex-wrap>;

4. justify-content：子容器在主轴的排列方向。

   1. justify-content: flex-start; // 默认，左对齐
   2. justify-content: flex-end; // 右对齐
   3. justify-content: center; // 居中
   4. justify-content: space-between; // 两端对齐，项目之间的间隔都相等。
   5. justify-content: space-around; // 环绕对齐，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items：子容器在交叉轴的排列方向。侧轴没有两端对齐和环绕对齐

   1.     align-items: flex-start;    // 交叉轴的起点对齐。
   2.     align-items: flex-end;      // 交叉轴的终点对齐。
   3.     align-items: center;        // 交叉轴的中点对齐。
   4.     align-items: baseline;      // 项目的第一行文字的基线对齐。
   5.     align-items: stretch;       // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content：多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

   1.     align-content: flex-start;   // 与交叉轴的起点对齐
   2.     align-content; flex-end;     // 与交叉轴的终点对齐。
   3.     align-content: center;       // 与交叉轴的中点对齐。
   4.     align-content: space-between;// 与交叉轴两端对齐，轴线之间的间隔平均分布。
   5.     align-content: space-around; // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
   6.     align-content: stretch;     // 默认 轴线占满整个交叉轴。

三，子容器的6个特性

1. order：子容器的排列顺序

   1. order: num;
   2. 定义项目的排列顺序。数值越小，排列越靠前，默认为 0

2. flex-grow：子容器剩余空间的拉伸比例

   1. flex-grow: <number>; /* default 0 */
   2. 定义子容器的伸缩比例。按照该比例给子容器分配空间

3. flex-shrink：子容器超出空间的压缩比例

   1. flex-shrink: <number>; /* default 0 */
   2. 定义了子容器弹性收缩的比例
   3. 此属性要生效，父容器的 flex-wrap 属性要设置为 nowrap

4. flex-basis：子容器在不伸缩情况下的原始尺寸

   1. flex-basis: <length> | auto; /* default auto */
   2. 定义了子容器在不伸缩情况下的原始尺寸，主轴为横向时代表宽度，主轴为纵向时代表高度

5. flex：子元素的 flex 属性是 flex-grow,flex-shrink 和  flex-basis 的简写

   1. 是 flex-grow,flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选
   2. 有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

6. align-self：

   1. 允许单个项目有与其他项目不一样的对齐方式，可覆盖父容器 align-items 属性
   2. 默认值为 auto，表示继承父元素的 align-items属性，如果没有父元素，则等同于 stretch

   3.   align-self: auto;             // 继承父元素的 align-items 属性
          align-self: flex-start;       // 交叉轴的起点对齐。
          align-self: flex-end;         // 交叉轴的终点对齐。
          align-self: center;           // 交叉轴的中点对齐。
          align-self: baseline;         // 项目的第一行文字的基线对齐。
          align-self: stretch;          // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。

四，flex布局的相关注意点

1，换行问题:flex-wrap属性

1. flex-wrap: nowrap;不换行
2. flex-wrap: wrap;换行，上边排满
3. flex-wrap: wrap-reverse;换行，下边排满
4. 如果伸缩容器的高度比换行之后所有伸缩项的高度还要高, 那么系统会自动将剩余空间平分之后添加给每一行

2，换行对齐问题