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

详细分析可以参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox

一，伸缩布局的使用

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，换行对齐问题：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;
7. 
8. 伸缩容器中的伸缩项换行，此属性才可以
9. 换行中的拉伸对齐是指, 所有行的高度总和要和伸缩容器的高度一样，所以会将多余的空间平分之后添加给每一行

3，伸缩性排序：order

1.  如果想调整伸缩布局中伸缩项的顺序, 那么我们可以通过修改伸缩项的order属性来实现
2. 默认情况下order的取值是0
3. 如果我们设置了order属性的值, 那么系统就会按照设置的值从小到大的排序

4，伸缩项放大比例：flex-grow

1. 当所有伸缩项宽度的总和没有伸缩容器宽度大的时, 我们可以通过flex-grow让系统调整伸缩项的宽度 
2. 步骤
   1. 剩余的空间 =  伸缩容器宽度 - 所有伸缩项的宽度
   2. 每份剩余空间的宽度 =   剩余空间 / 需要的份数
   3. 每个伸缩项最终的宽度 = 伸缩项的宽度 + 需要的份数 * 每份的宽度
3. flex-grow默认值是0
4. 如果有伸缩项没有设置flex-grow, 那么系统会保持原有的宽度

5， 伸缩项缩小比例：flex-shrink

1. 当所有伸缩项宽度的总和比伸缩容器宽度大的时, 我们可以通过flex-shrink让系统调整伸缩项的宽度
2. 步骤：
   1. 溢出的宽度 = 伸缩容器的宽度 - 所有伸缩项的宽度总和
   2. 总权重 = 每个伸缩项需要的份数 * 每个伸缩项的宽度
   3. 每个伸缩项需要压缩的宽度 = 溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重
3. flex-shrink: 默认值是1
4. 如果想让某个伸缩项不缩小, 那么需要将它的flex-shrink设置为0

6，伸缩项的宽度：flex-basis

1. 如果是伸缩布局, 除了可以通过元素的width属性来设置宽度以外, 还可以通过flex-basis属性来设置伸缩项的宽度
2. width属性可以设置宽度/flex-basis也可以设置宽度，如果两者同时存在, 系统会听flex-basis的
3. flex-basis属性是专门提供给伸缩布局使用的
4. 如果同时通过这两个属性设置了宽度, 但是其中一个是auto, 那么系统会按照具体值来设置