Flexbox 是现代 web 页面布局的一大利器，但是相关属性众多，本人每次使用都要查文档，而且查了多次（≥20）居然一点都没记住。

所以我就写了这个 cheatsheet，不是因为写了就记住了，而是从自己写的文档里翻东西比较快……

display: flex;

在某个元素上设置，这个元素内部使用 Flexbox 布局。

flex-direction

主轴方向，取值如下：

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

justify-content

控制主轴方向上元素的排列，取值如下：

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

start/flex-start 和 end/flex-end 之间的差别在于是否只对 flex 元素生效。

align-items

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

flex

flex: 数字

代表元素在flexbox中占的比例。