flex的使用（流式布局）

1.传统布局和flex布局比较的特点

• 传统布局：
  • 兼容性好
  • 写起来比较复杂
• flex布局：
  • 兼容性不好，尤其ie9及以下不支持，但是webkit内核完全支持
  • 写起来就简单
• 适用场景
  • 传统布局适用于：pc端
  • flex布局适用于：移动端

2.flex布局的原理、特点、进入语法

• 名称：弹性盒、伸缩盒、弹性布局、伸缩布局 => flex布局
• 原理：
  • 父项 ： 给父项添加display：flex
  • 子项
• 特点：
  • 元素不在分块级、行内块、行内元素

3.父容器的属性设置

• 注意：使用以下属性生效的前提是给父级添加了display：flex
• 设置主轴方向 flex-direction ： 两个方向（水平和垂直）
  • row (默认值)：子项元素水平排列，从左向右
  • row-reverse: 子项元素水平排列，从右向左
  • column: 子项元素垂直排列，从上到下
  • column-reverse: 子项元素垂直排列，从下到上
• 设置子项在主轴方向上的排列方式 justify-content（重要）

  /* 设置元素在主轴方向上的分布方式 */
      /* 默认值：元素水平方向从左向右依次排列 */
      /* justify-content: flex-start; */
      /* 父项左右两边被子项占上，其他元素平均分配剩余空间 */
      /* justify-content: space-between; */
      /* 设置子项整体在父项中居中 */
      /* justify-content: center; */
      /* 设置子项平均分配父项的剩余空间 */
      /* justify-content: space-around; */
      /* justify-content: flex-end; */

• 设置子项换行 flex-wrap
  • nowrap （默认值）: 不换行 如果子项宽度超出父项的宽度，压缩每一个子项的宽度
  • wrap：换行 保持子项原有宽度，超出父项宽度，换行
• 设置子项在侧轴方向上的排列方式（单行）

   /* 侧轴方向上元素的排列方式，默认是拉伸,只有在子项元素不设置在侧轴方向上的尺寸时，能够拉伸 */
      /* align-items: stretch; */
      /* 设置子项在侧轴的最上边 */
      /* align-items: flex-start; */
      /* 设置子项在侧轴居中 */
      /* align-items: center; */
      /* 设置子项在侧轴的最底端 */
      align-items: flex-end;
            align-items: flex-end;

• 设置子项在侧轴方向上的排列方式（多行）

 /* align-content: stretch; */
      /* 子项整体在侧轴居中 */
      /* align-content: center; */
      /* 子项在侧轴两端占空间，剩余空间平均分配 */
      /* align-content: space-between; */
      /* 子项在侧轴方向从上开始依次排列 */
      /* align-content: flex-start; */
      /* align-content: flex-end; */
      /* 子项在侧轴方向上平均分配空间 */
      align-content: space-around;

• 复合属性：flex-flow
  • 第一个属性值设置的是：flex-direction
  • 第二个属性值设置的是：flex-wrap