flex布局

• 特点
  • flex是flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性，任何容器都可以指定为flex布局
  • flex弹性布局，操作方便，布局简单，移动亿应用广泛
  • pc端支持较差，
• 与传统布局区别
  • 传统布局在pc端兼容性好，但是布局繁琐，有局限性，不能在移动端方便的布局
• 两者总结（随便写写）
  • 如果是pc端，用传统布局
  • 如果是移动或者不考虑兼容性的pc端布局，就是用flex弹性布局

布局原理

• 当我们为父元素设置flex布局后，子元素的 float clear 和 vertical-align属性都会失效
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
• 采用flex布局的元素称为 “flex容器” 它的所有子元素自动成为容器的成员，
  被称为 “flex项目”
  • div盒子设置 display:flex属性后 这个div就是flex容器，而div下的所有子元素都是flex项目，这些子容器可以纵向排列，也可以横向排列
• 总结
  • 通过给父盒子添加 flex属性，来控制盒子的位置和排列方式

flex-direction (父元素属性)

• 作用

  • 设置主轴的方向

• 介绍（瞎bb）

  • 在flex布局中是分为主轴和测轴两个方向的，同样的叫法有 行和列 x轴和y轴
  • 默认主轴的方向就是在x轴的方向，水平向右
  • 而侧轴的方向就是在y轴的方向，水平向下
  • 但是主轴和侧轴的方向是可以变换的

• 属性

  • row 默认值 从左到右 （元素的排列方式）
  • row-reverse 从右到左

  • 分隔线下主轴是 y轴

  • 分隔线上主轴是 x 轴
  • column 从上到下
  • column-reverse 从下到上

• 总结

  • flex-direction属性决定了主轴的方向（即子元素排列的方向）
  • 主轴和侧轴是会变化的，就看谁是主轴，谁是侧轴，而我们的子元素就是跟着主轴来排列的
  • 属性为 row 即 x轴为主轴 属性为 column 即 y轴为主轴

• 用法 (css样式)
  

  div{
      /* 给父级 添加flex属性*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      /* 从左到右 默认*/
      /* flex-direction: row; */
      /* 从右到左 */
      /* flex-direction: row-reverse; */
          
      /* 把flex主轴设置为y轴 */
      /* 从上到下 */
      /* flex-direction: column; */
      /* 从下到上 */
      /* flex-direction: column-reverse; */
  
  }
  div span{
      width: 150px;
      height: 100px;
      background-color: purple;
  }

  • html标签

    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>

justify-content (父元素属性)

• 作用

  • 该属性定义了子元素在主轴的对其方式

• 属性值

  • flex-start 默认值 从头部开始，如果主轴是x轴，则从左到右
  • flex-end 从尾部开始排列
  • center 在主轴居中对其
  • space-around 平分剩余空间
  • space-between 先贴两边，在平分剩余空间（重要）
    • 比如有3个div 边上的2个div贴两边，中间的div占剩余的空间

• 用法

      div{
          /* 给父级 添加flex属性*/
          display: flex;
          width: 800px;
          height: 300px;
          background-color: pink;
          /* 默认的主轴是 x轴 row; */
          /* justify-content: 是设置主轴子元素的排列方式; */
          /* justify-content: flex-start; 默认的 */
          /* 贴右边对其 */
          /* justify-content: flex-end;  */
          /* 居中对其 */
          /* justify-content: center; */
          /* 平分剩余空间 */
          /* justify-content: space-around; */
          /* 左右盒子贴两边 中间盒子平分 */
          justify-content: space-between;
  
      }
      div span{
          width: 150px;
          height: 100px;
          background-color: purple;
      }
  </style>

  • html标签

      <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

flex-warp (父元素属性)

• 作用

  • 可以让flex元素是否换行
  • 默认情况下子元素是排列在主轴直线上的（不会换行）

• 属性值

  • nowarp 默认值 不换行
  • wrap 换行

• 用法

  • 在父元素设置 flex-wrap: wrap 子元素就会换行了，前提是父元素要有 display:flex样式

        div{
        display: flex;
        width: 600px;
        height: 400px;
        background-color: pink;
        flex-wrap: wrap; /*让子元素换行*/
    }

align-items (父元素属性)

• 作用

  • 设置侧轴的元素排列方式
  • 改属性是控制子元素在侧轴的排列方式（子项为单项的时候使用（不换行））

• 属性值

  • flex-start 默认值 从上到下
  • flex-end 从下到上
  • center 垂直居中 （用的多）
  • stretch 拉伸

• 用法

     div{
      /* 给父级 添加flex属性*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      justify-content: center; /* 子元素水平居中主轴对其居中(主轴)*/
      align-items: center; /*子元素垂直居中 侧轴对其居中(侧轴)*/
      /* 注意： div是 父元素 给父元素设置后是让子元素排列 */
  }

align-content (父元素属性)

• 作用

  • 设置侧轴上子元素的排列方式（多行）
  • 适用于子项出现多行的情况下，在单行是没有效果的（子元素换行就可以用这个）

• 属性值

  • flex-start 默认值 在侧轴的头部开始排列
  • flex-end 在侧轴的尾部开始排列
  • center 在侧轴中间显示
  • space-around 子元素平分侧轴的剩余空间
  • space-between 子元素在侧轴线分布在两边 在平分中间的剩余空间
  • stretch 设置子元素的高度平分父元素高度（就是子元素的高度跟父元素一样高）

flex-flow (父元素属性)

• 作用
  • 是flex-direction和flex-wrap的复合属性
  • 有两个属性的特点
• 用法

  div{
      /* 给父级 添加flex属性*/
      display: flex;
      width: 600px;
      height: 300px;
      background-color: pink;
      /* flex-direction: column;
      flex-wrap: wrap; */
      /* 把设置主轴方向和是否换行简写 */
      flex-flow: column wrap;
      /*这个属性是设置主轴的方向 和 换行*/
  }

flex (子元素属性)

• 作用

• 定义子项分配的剩余空间时，用flex来标识该子元素站多少的份数

• 属性

  数字	表示子元素在父元素剩余空间中占多少份
  %	表示子元素在父元素剩余空间的占百分之多少

align-self (子元素属性)

• 作用

• 控制子元素自己在侧轴的排列方式
• 允许单个子元素和其他子元素不同的对其方式，可覆盖align-items属性

• 属性

• auto 默认值 表示继承父元素的align-items属性，如果没有父元素则效果和stretch相同
• 其他属性均和 align-items相同

order (子元素属性)

• 作用
  • 定义子元素的排列顺序
  • 数值越小排列越靠前 默认为0 可以为负值
  • 和z-inde不一样，z-inde是元素叠在一起时显示的顺序，而order是元素分散开，显示的位置的顺序
• 用法

     div {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        /* 让三个子盒子沿着侧轴底侧对其 */
        /* align-items: flex-end; */
        /* 让三号盒子下来底侧 */
  
    }
    div span{
        width: 150px;
        height: 100px;
        background-color: purple;
        margin-right: 5px;
    }
    div span:nth-child(3){
        align-self: flex-end;
    }
    div span:nth-child(2){
        order: -1;
        /* 让2号盒子在最前面 */
    }
  /*span的排列顺序现在是 2 1 3了*/

• html标签

    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
  </div>