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 autoflex: 0 1
      不过常见有写:flex: 1
      意思是:若存在剩余空间时,该item填充满;
      但若是空间已经不够用了(超出父容器),同样有:
    • flex: 1flex: 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
参考文献

相关推荐