一文掌握flex布局

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

一文掌握flex布局

• 开启flex布局

  • display:flex

• 常见父项属性

  • flex-direction 设置主轴方向

    • 主轴分行和列 行 水平向右 列垂直向下

    • 默认的主轴就是行

    • 支持四个属性

      • row 从左往右(默认)

            div {
                display: flex;
                flex-direction: row;
            }
        

        

      • row-reverse 从右往左

            div {
                display: flex;
                flex-direction: row-reverse;
            }
        

        

      • column 从上往下

        div {
                display: flex;
                flex-direction: column;
            }
        

        

      • column-reverse 从下往上

            div {
                display: flex;
                flex-direction: column-reverse;
            }
        

        

  • justify-content 设置主轴子元素排列方式

    • 支持5个属性

    • flex-start 从头部开始 会根据主轴变化确定头部(默认)

          div {
              display: flex;
              justify-content: flex-start;
          }
      

      

    • flex-end 从尾部开始

          div {
              display: flex;
              justify-content: flex-end;
          }
      

      

    • center 在主轴居中对齐 主轴是行 水平对齐 主轴是列 垂直对齐

          div {
              display: flex;
              justify-content: center;
          }
      

      

    • space-around 平分剩余空间

          div {
              display: flex;
              justify-content: space-around;
          }
      

      

    • space-between 最外面两边贴边 剩余平分空间

          div {
              display: flex;
              justify-content: space-between;
          }
      

      

  • flex-wrap设置子元素是否换行

    • 主要的两个属性

    • nowrap 子元素超出不换行(默认)

      • 超出元素会缩小

          div {
              display: flex;
              flex-wrap: nowrap;
          }
      

      

    • wrap 超出换行

          div {
              display: flex;
              flex-wrap: wrap;
          }
      

      

  • align-content 设置侧轴上子元素排列方式（多行）

    • 只能在多行情况下使用 单行下没有效果
    • flex-start 从头部开始排列
    • flex-end 从底部开始排列
    • center 在侧轴中间显示
    • space-around 平分侧轴剩余空间
    • space-between 两边贴边 剩下的平分空间
    • stretch 子元素平分父元素高度

  • align-items 设置侧轴上子元素排列方式（单行）

    • flex-start 从上往下(默认)

    • flex-end 从下往上

    • center 垂直居中

          /* 水平垂直居中 */
          div {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 800px;
          }
      

      

    • stretch 拉伸

      • 注意点 在设置拉伸属性的时候 子元素不能设置高度 否则失效

            div {
                display: flex;
                align-items: stretch;
                height: 800px;
            }
        

        

  • flex-flow 相当于同时设置flex-direction flex-wrap

• 常见子属性

  • align-self 控制子元素自己在侧轴排列方式

        div span:nth-child(1) {
            align-self: flex-end;
        }
    

    

  • order 定义项目的排列顺序

    • 数值越小 排列越靠前 默认为0

总结

• 今天又是努力学习的一天 大家多写写flex布局 练练手