弹性布局补充

弹性布局，交叉轴对齐方式

• align-items：center 交叉轴居中

• align-items：flex-start 交叉轴底部开始

• align-items：flex-end 交叉轴底部倒序开始

• align-items：baseline 交叉轴基线对齐

• align-items：stretch 默认值，当项目高度为auto时，项目的高就是容器的高（即自动盛满容器）

  多根轴线的对齐方式

• align-content：flex-start 默认值左对齐

• align-content：flex-end 右对齐

• align-content：center 居中

• align-content：space-between 两端对齐，项目间隔相等

• align-content：space-around 中间比两端空间大一倍

• align-content：space-evenly 平均分配对齐

  隶属于项目

  order：数值 设置项目的顺序

  flex-grow：数值 设置项目变大

  1. 如果所有项目中只出现一次flex-grow不管取值多少，所有剩余空间都给当前标签。

  2. 如果所有项目中的属性出现多少次flex-grow

     • flex-shrink：数值（默认值为1）设置项目缩小

        

      

设置项目交叉轴的对齐方式(只控制单个)

• align-self：flex-start

• align-self：flex-end 单个项目向下移

• align-self：center 单个项目居中