阅读 362

一文掌握flex布局

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

一文掌握flex布局

  • 开启flex布局

    • display:flex
  • 常见父项属性

    • flex-direction 设置主轴方向

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

      • 默认的主轴就是行

      • 支持四个属性

        • row 从左往右(默认)

              div {
                  display: flex;
                  flex-direction: row;
              }
          复制代码

          image-20210826152359326

        • row-reverse 从右往左

              div {
                  display: flex;
                  flex-direction: row-reverse;
              }
          复制代码

          image-20210826153002023

        • column 从上往下

          div {
                  display: flex;
                  flex-direction: column;
              }
          复制代码

          image-20210826153114492

        • column-reverse 从下往上

              div {
                  display: flex;
                  flex-direction: column-reverse;
              }
          复制代码

          image-20210826153236674

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

      • 支持5个属性

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

            div {
                display: flex;
                justify-content: flex-start;
            }
        复制代码

        image-20210826153851358

      • flex-end 从尾部开始

            div {
                display: flex;
                justify-content: flex-end;
            }
        复制代码

        image-20210826153943350

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

            div {
                display: flex;
                justify-content: center;
            }
        复制代码

        image-20210826154034416

      • space-around 平分剩余空间

            div {
                display: flex;
                justify-content: space-around;
            }
        复制代码

        image-20210826154126304

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

            div {
                display: flex;
                justify-content: space-between;
            }
        复制代码

        image-20210826154311290

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

      • 主要的两个属性

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

        • 超出元素会缩小
            div {
                display: flex;
                flex-wrap: nowrap;
            }
        复制代码

        image-20210826154658936

      • wrap 超出换行

            div {
                display: flex;
                flex-wrap: wrap;
            }
        复制代码

        image-20210826154813590

    • 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;
            }
        复制代码

        image-20210826160044741

      • stretch 拉伸

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

              div {
                  display: flex;
                  align-items: stretch;
                  height: 800px;
              }
          复制代码

          image-20210826160310245

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

  • 常见子属性

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

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

      image-20210826161514821

    • order 定义项目的排列顺序

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

总结

  • 今天又是努力学习的一天 大家多写写flex布局 练练手
文章分类
前端
文章标签