一文掌握flex布局

theme: healer-readable

这是我参与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布局 练练手