CSS-Flex-Grid-布局-自检手册

写在前面

本文只列出 flex 及 grid 布局的一些基本概念及新增属性，用于自检对相关知识的掌握程度。
具体教程及实例还请参考文末的引用文献。

Flex 布局

概念

• flex 容器（flex container）
• flex 项目（flex item）

• 主轴（main axis）

  • 主轴位置（main start、main end）
  • 主轴空间（main size）

• 交叉轴（cross axis）

  • 交叉轴位置（cross start、cross end）
  • 交叉轴空间（cross size）

属性

• 容器属性

  • flex-direction

    • row
    • row-reverse
    • column
    • column-reverse

  • flex-wrap

    • nowrap
    • wrap
    • wrap-reverse

  • flex-flow

    • 双参数：flex-direction, flex-wrap

  • justify-content

    • flex-start
    • flex-end
    • center
    • space-between
    • space-around

  • align-items

    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

  • align-content (发生 wrap 时才生效)

    • flex-start
    • flex-end
    • center
    • stretch
    • space-between
    • space-around

• 项目属性

  • order

    • 缺省：0

  • flex-grow

    • 缺省：0

  • flex-shrink

    • 缺省：1

  • flex-basis

    • 缺省：auto

  • flex

    • 三参数：flex-grow, flex-shrink, flex-basis

  • align-self

    • auto
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch

Tips：

• item 的 flex 三个参数最好写全，事实上：

  • flex: 0 1 auto ≠ flex: 0 1
    不过常见有写：flex: 1
    意思是：若存在剩余空间时，该 item 填充满；
    但若是空间已经不够用了（超出父容器），同样有：
  • flex: 1 ≠ flex: 1 1 auto
    虽然 flex 参数 2 和参数 3 的缺省值是：1 auto

• item 的 flex 属性：

  • 缺省值：0 1 auto

    • 参数 1：0 代表不扩展，非 0 代表参与比例运算扩展
    • 参数 2：0 代表不压缩，非 0 代表参与比例运算压缩
    • 参数 3：auto 代表默认大小，常用的还有百分比（相对于父元素）和固定大小；
  • flex-grow：父容器存在剩余空间时生效；
  • flex-shrink：超出父容器总空间时生效；
  • flex-basis：分配剩余空间之前的预处理；

Grid 布局

概念

• grid 容器
• grid 网格线
• grid 单元
• grid 区域
• grid 轨道

属性

• 容器属性

  • grid-template-rows
  • grid-template-columns
  • grid-template-ares

• 区域属性

  • grid-area

参考文献

• Flex 布局教程：语法篇
  作者：阮一峰
• Flex 布局教程：实例篇
  作者：阮一峰
• 采用 20/80 原则学习 CSS Grid 布局 (译)
  作者：一歩