一、弹性盒子

1、容器属性——添加弹性容器上

• flex-wrap属性：指定弹性盒子的子元素换行方式

  • flex-wrap: wrap; 换行，第一行显示在上方

  • flex-wrap: wrap-reverse; 换行，第一行显示在下方

  • flex-wrap: nowrap; 默认值，不换行

  注意：父元素有固定高度且高度大于子元素换行后高度之和换行中间有缝隙

  父元素高度有内容撑开换行没有缝隙

• align-content属性：折行,行与行之间有间隙,去除间隙 （去掉了中间的间隙）

  要设置： flex-wrap: wrap;

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

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

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

  • align-content: space-between; 两端对齐，中间自动分配, 元素位于各行之间留有空白空间

  • align-content: space-around; 自动分配距离，元素位于各行之前、之间、之后都留有空白空间, 中间的间距是两端间距的两倍,

  • align-content: space-evenly;平均对齐，元素位于各行之前、之间、之后都留有空白空间， 行间距自动分配 间距相等

2、项目属性——写在弹性子元素上

• flex属性：剩余空间的分配

应用场景 : 两、三栏自适应

• 复合写法

flex-flow:flex-direction  flex-wrap;
例：
flex-floe:cloumn wrap;

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

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

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

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

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

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

.

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

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

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

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

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

  • 负值对该属性无效

  • 可以为小数

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

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

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

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

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

  • 负值对该属性无效

• 可以为小数

    .warp {
              width: 500px;
              height: 400px;
              display: flex;
          }
          .warp div {
              width: 200px;
              height: 100px;
          }
          /*不足空间，缺了100 600-500=100*/
          .box1 {
              background-color: red;
              flex-shrink: 2;
              /*200 - 100 * 1/4 = 150 */
          }
          .box2 {
              background-color: pink;
              flex-shrink: 1;
              /*200 - 100 * 1/4 = 175*/
          }
          .box3 {
              background-color: brown;
              flex-shrink: 1;
              /*200 - 100 * 1/4 = 175*/
          }