flex布局主要分容器和item

容器

  • flex-direction 主轴方向 row｜row-reverse｜column｜column-reverse
  • flex-wrap 一条轴线排不下，如何换行 nowrap｜wrap｜wrap-reverse
  • flex-flow 是flex-direction和flex-wrap的简写形式
  • justify-content item在主轴上的对其方式 flex-start｜flex-end｜center｜space-between｜spac-around
  • align-items 交叉轴的对齐方式 flex-start｜flex-end｜center｜baseline｜stretch
  • align-content 多根轴线对齐方式，若项目只有一根轴线该属性不起作用

item

  • order 数值越小，排列越靠前
  • flex-grow 项目的放大比例，默认为0，即存在剩余空间也不放大
  • flex-shrink 项目缩小比例，默认为1，即存在空间不足的话，该项目则缩小
  • flex-basis 项目分配多余空间前，占据的主轴空间，默认 auto

flex：1 => 对应完整是 flex：1 0 auto，分别对应flex-grow，flex-shrink，flex-basis
表示 占据剩余空间

PS：问得最多的就是flex：1的解读