弹性盒子的属性大全

• css面试题

弹性盒子

• 盒子模型设置需求

  • 1.使用display 来进行设置

  • 2.设置父级宽度

  • 3.子级宽度总和小于父级宽度以子级宽度为准 大于父级宽度进行平分

  • 4.放大缩小使用flex-grow 和 flex-shrink

    • 4.1 flex-grow 数值越大缩放越大 默认为0
    • 4.2 flex-shrink 数值越大缩小的越厉害 默认为1 数值为0时 表示元素不缩小

  • 5.flex-basis 设置元素的宽度 同width 优先级比width高仅在flex中使用

  • 6.复合flex flex：grow shrink basis 默认为0 1 auto优先使用flex

  • 7.flex-direction 排序方向

    • 7.1 row默认为横向排版
    • 7.2 row-reverse 横向反向排序
    • 7.3 column 竖向排版
    • 7.4 column-reverse 竖向反向排版
    • 7.5 注意使用竖向排版的时候需要注意不要设置高度
  • 8. flex-wrap 多行显示
       • 8.1 nowarp 默认值不换行
       • 8.1 warp 多行显示
       • 8.1 warp-reverse 多行反向显示
  • 9. flex-flow 复合属性 6-8
       • 9.1 flex-flow ：direction warp 默认值 row nowarp
  • 10. order 取值 整数即可 用来定义子元素的顺序
  • 10. 对齐
    • 10.1 水平对齐 justify-content
      • 10.1.1 flex-start 默认值 所有元素都在左边
      • 10.1.2 center 所有元素都在中间
      • 10.1.3 flex-end 所有元素都在右边
      • 10.1.4 supace-between 子元素平均分布
      • 10.1.5 space-around 子元素平均分布 两边留有距离
    • 10.2 垂直对齐 align-items
      • 10.2.1 flex-start 默认值 所有子元素都在上边
      • 10.2.2 center 所有子元素都在中间
      • 10.2.3 flex-end 所有子元素都在下边
      • 10.2.4 baseline 所有子元素都在父元素的基线上
      • 10.2.5 strecth 拉伸子元素 适应父元素的高
        部分功能演示