前置知识

对父容器进行操作

flex-wrap

flex-direction

justify-content（左右排列的走向）

align-items（上下排列的走向,一列只有一个item）

“ as the justify-content version for the cross-axis”

• stretch (default): stretch to fill the container
• flex-start / start / self-start
• flex-end / end / self-end
• center
• baseline
  

align-content（一列有多个item）

• flex-start：与纵轴的起点(cross start)对齐。
• flex-end：与纵轴的终点对齐。
• center：与纵轴的中点对齐。
• space-between：与纵轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个纵轴。
  

对Items进行操作

align-self属性

• 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
• 默认值为auto，表示继承父元素的align-items属性
• 如果没有父元素，则等同于stretch
• 该属性可取6个值，除了auto，其他都与align-items属性完全一致
  

order属性

• 定义项目排列顺序
• 数组越小越靠前
• 默认为0
  

flex-grow

• 剩余空间，按照比例添加给各个item
• 剩余空间：flex容器大小 - 所有flex项目大小
• 所有项目都有相同系数，获得相同的剩余空间
• 否则根据flex-grow决定的比例分配剩余空间
• 例子
  
  

flex-shrink

• 超出空间 = 各个item的宽度之和 - 父容器的宽度
• 超出空间，让各个item按照比例减去相应的部分
• 所以item的默认宽度相加时，大于容器时收缩
• 收缩比例是根据flex-shrink的值，初始值为1
• 参数为0时，表示未压缩
  
• 参数不可为负
  

flex-basis

• 设置每一个item（flex元素）的初始值大小
• 默认值为auto，项目本来的大小
  
• 统一设置过了flex-basis，后面再设置不起作用
  

flex属性

• flex-grow, flex-shrink 和 flex-basis的简写
• 默认值为0 1 auto
• flex：1;就只使用了flex-grow:1;
• 后两个属性可选
• 两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
• 优先使用这个属性