web知识

align-content属性：折行,行与行之间有间隙,去除间隙 ,控制侧轴对齐方式（去掉了中间的间隙）

  要设置：  flex-wrap: wrap;

  - align-content: flex-start; 顶端没有行间距

  - align-content: flex-end; 底对齐没有行间距

  - align-content: center; 居中没有行间距

  - align-content: space-between; 两端对齐，中间自动分配

  - align-content: space-around; 自动分配距离

  注意：弹性盒项目为多行时有效

   display: flex;

              /* 设置后没有间隙 上端 下端*/

              align-content: flex-start;

              align-content: flex-end;

       

              /* 设置后没有间隙 中间*/

              align-content: center;

              /* 自动分配距离 */

              align-content: space-around;

              /* 两端对齐，中间自动分配 */

              align-content: space-between;

 

               #### 复合写法

  ```css

  flex-flow:flex-direction  flex-wrap;

  例：

  flex-flow:cloumn wrap;

  ```

 

### 1.5 项目属性——写在弹性子元素上

- align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）

  此属性和弹性容器的 align-items 属性作用相同

  * align-self: stretch; 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度

  * align-self: flex-start;（侧轴）交叉轴起点对齐

  * align-self: flex-end; （侧轴）交叉轴终点对齐

  * align-self: center; （侧轴）交叉轴中点对齐

 

order属性；子元素的排列次序

  - 属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前

  - 必须为整数，不能为小数，可以为负数

 

flex

  - 作用：用于指定弹性子元素如何分配空间。

    flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

- flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）

  - 属性值为数值，没有单位，默认值为0，表示不放大

  - 负值对该属性无效

  - 可以为小数

  - 注意：当容器有剩余空间时有效

 

- flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）

  - 属性值为数值，没有单位

  - 默认值为1，表示当空间不足时，等比例缩小

  - 属性值为0，表示当空间不足时，不缩小

  - 负值对该属性无效

- 可以为小数

 每个元素的宽

         (当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度

  ```