FLEX 布局简单总结

容器属性

• flex-direction 决定主轴的方向，即项目排列方向
  • row 按行排列
  • row-reverse 反转
  • column 按列排列
  • column-reverse 反转
• flex-wrap 设置换行
  • nowrap 不换行，项目总宽度大于 flex 容器宽度，项目会强行等分容器
  • wrap 换行，项目会根据自身宽度进行排列
• justify-content 项目在主轴上的对齐方式
  • center 居中对齐
  • flex-start 起点对齐
  • flex-end 终点对齐
  • space-between 两端对齐（等间距）
  • space-around 项目间距为左右两侧项目到容器间距的 2 倍
  • space-evenly 项目间距与项目到容器的间距相等
• align-items 项目在交叉轴上的对齐方式
  • center 居中对齐
  • flex-start 起点对齐
  • flex-end 终点对齐
  • space-between 两端对齐（等间距）

项目属性

• order 定义项目的排列顺序，数值越小，排列越靠前，默认为 0

• flex-grow 项目在有剩余空间的情况下是否放大，默认值为 0，表示不放大

• flex-shrink 项目在空间不足时是否缩小，默认值为 1，表示空间不足等比缩小

• flex-basis 设置项目在分配多余空间之前的宽度，默认 auto，即项目本来的大小

• flex 是上边三个属性的简写，用于定义项目的方法、缩小与宽度

  flex: auto; (1 1 auto) 等分等比放大
  flex: none; (0 0 auto) 不放大，但等分缩小
  flex: 1; (1 1 0%)
  

• align-self 设置指定项目在交叉轴的对齐方式，可以覆盖 align-items 属性

  • center 居中对齐
  • flex-start 起点对齐z
  • flex-end 终点对齐

• 参考 阮一峰的 flex 布局教程

flex:1 和 flex:auto 区别

• flex 属性是 flex-grow、flex-shrink、flex-basis 三个属性的缩写
• flex: 1 其实是 flex: 1, 1, 0% 的缩写
• flex: auto 其实是 flex: 1, 1, auto
• 两者都同时指定了项目在有剩余空间的情况下放大，空间不足时缩小
• 区别只在于 flex-basis 这个属性上，在分配容器剩余空间之前项目占据的空间
• auto 表示基准值，也就是设置的 width
• 0% 表示 0，也就是无尺寸