flex布局开发

flex布局开发

  1. 布局原理

    • flex时flexible Box的缩写,意为“弹性布局”,用来为盒子模型提供最大的灵活性,任何一个容器都可以定位flex布局
    • 【注意】
      • 当我们为父盒子设为flex布局以后,子元素的float、clear和vertical-align属性将失效
      • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  2. 常见父项属性

    • flex-direction:设置主轴的方向

      • flex-direction属性值决定主轴的方向(及项目的排列方向)

      • 【注意】

        • 主轴和侧轴是会变化的,就看flex-diretion设置谁为主轴,剩下的就是侧轴,子元素是跟着主轴来排列的

          属性值 说明
          row 默认值从左到右
          row-reverse 从右到左
          column 从上到下
          column-reverse 从上到下
    • justify-content:设置主轴上的子元素排列方式

      • 【注意】

        • 使用这个属性之前要确定好主轴是哪个

          属性值 说明
          flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
          flex-end 从尾部开始排列
          center 在主轴居中对齐
          space-around 平分剩余空间
          space-between 先两边贴边 在平分剩余空间
    • flex-wrap:设置子元素是否换行

      • 属性值 说明
        nowrap 默认值,不换行
        wrap 换行
    • align-content:设置侧轴上的子元素的排列方式(多行)

      属性值 说明
      flex-start 从上到下
      flex-end 从下到上
      center 垂直居中
      strech 拉伸(默认值)【项目不要给高度】
      space-around 子项在侧轴平分剩余空间
      stretch 设置子项元素高度平分元素高度
    • align-items:设置侧轴上的子元素排列方式(单行)

      属性值 说明
      flex-start 从上到下
      flex-end 从下到上
      center 垂直居中
      strech 拉伸(默认值)【项目不要给高度】
    • flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap

  3. 子项常见属性

    • flex子项占的分数

      .item{
      flex:;
      }
    • align-self控制子项子级在侧轴的排列方式

      • align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

      默认值是auto,表示继承父元素align-items属性,如果没有父元素,则等同于stretch

    • order属性定义子项的排列顺序(前后顺序)

      • 数值越小排列越靠前

你可能感兴趣的:(flex布局开发)