概念解析

最外层的边框称为Flex容器（flex container），所有的子元素称为Flex项目（flex item）。

概念	说明
main axis	主轴，水平方向
cross axis	交叉轴，垂直方向
main start	主轴开始的位置
main end	主轴结束的位置
cross start	交叉轴开始的位置
cross end	交叉轴结束的位置
main size	单个项目的宽度
cross start	单个项目的高度

属性解析

• flex-direction 项目的排列方式

  • row

  graph LR
  1 --> 2 -->3
  

  • row-reverse

  graph RL
  1 --> 2 -->3
  

  • column

  graph TB
  1 --> 2 -->3
  

  • cloumn-reverse

  graph TB
  3 --> 2 -->1
  

• flex-wrap 项目在轴线的换行方式

  • nowrap 不换行
  • wrap 换行

• 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 项目第一行文字的基线对齐

• align-content 设置flow-wrap:wrap时生效，即在多行项目时，每一行中对齐的项目

  • flex-start 交叉轴起点对齐
  • flex-end 交叉轴终点对齐
  • cneter 交叉轴中点对齐
  • space-between 交叉轴两端对齐，中间平均分布
  • space-around 每个项目之间的间距相等

• 项目（flex item）属性

  • align-self 允许单个项目设置与其他项目不同的对齐方式，可覆盖align-items属性

  • flex-basis 定义项目占据的主轴空间（main size）

  • flex-grow 放大比例，默认0

  • flex-shrink 缩小比例，默认1

  • flex flex-grow、flex-shrink、flex-basis组合

  • order 项目排序顺序，越小越靠前