弹性布局


  • 组成
    • 容器
    • 项目
    • 主轴
    • 交叉轴
  • 容器属性
    • flex-flow
      • flex-direction:主轴方向
      • flex-wrap:换行方式
    • 对齐
      • justify-content:主轴对齐方式
      • align-items:交叉轴对齐方式
      • align-content:多根轴线对齐方式
  • 项目属性
    • order:项目排列顺序
    • flex
      • flex-grow:项目占用剩余空间比例
      • flex-shrink:项目吸收溢出空间比例
      • flex-basis:项目占用剩余空间的初始大小
    • align-self:项目自身对齐方式