伸缩项目一个伸缩项目就是伸缩容器的一个子元素。伸缩容器中的文本也被视为一个伸缩项目。以下6个属性设置在伸缩项目上。
自身侧轴对齐方式 align-self
伸缩基准值 flex-basis
扩展比率 flex-grow
收缩比率 flex-shrink
伸缩性 flex
显示顺序 order
【1】自身侧轴对齐方式:单个伸缩项目在侧轴的对齐方式，该属性可以覆盖伸缩容器的侧轴对齐方式
[注意]对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同CSS Code复制内容到剪贴板
//侧轴对齐方式: 自动 | 顶边对齐 | 中间对齐 | 底部对齐 | 基线对齐 | 伸缩项目拉伸填充整个伸缩容器
//新版本
align-self: auto[默认] | flex-start | center | flex-end | baselinebaseline | stretch
//混合版本
flex-item-align: auto[默认] | start | center | end | baselinebaseline | stretch
//旧版本无对应属性
[注意]如果伸缩项目的任一个侧轴上的外边距为auto，则该伸缩项目在伸缩容器的剩余空间内居中对齐，且align-self没有效果。
【2】伸缩基准值: 伸缩项目在主轴方向上的初始大小
CSS Code复制内容到剪贴板
//新版本
flex-basis: <length> | auto[默认]
//混合版本
positive-flex: <number>[默认为1]
//旧版本无对应属性
如果flex-basis的值为0，表示伸缩项目在主轴方向上的初始大小为0，则分配所有空间；如果flex-basis的值为auto，表示伸缩项目在主轴方向上的初始大小为其本身的大小，则分配剩余空间
[注意]flex-basis的<length>值可以是一个数字后面跟着px、em等单位，也可以是一个百分数，相对于其父伸缩容器的主轴长度
【3】扩展比率: 当伸缩容器的额外空间为正值时，此伸缩项目相对伸缩容器里其他伸缩项目能扩展的空间比例
CSS Code复制内容到剪贴板
//新版本
flex-grow: <number>[默认为0]
//混合版本
positive-flex: <number>[默认为0]
//旧版本无对应属性
若flex-grow的值为0表示即使存在剩余空间也不放大；若所有项目的flex-grow属性都为1，则它们将等分剩余空间(如果有的话)；若一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
