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 布局 (译)
  作者：一歩