【前言】今天学习了很多,在这里分享一下
【内容】项目属性:
设置容器内项目相关样式,用于设置项目的尺寸、位置,以及对项目的对齐方式做特殊设置。
项目属性:
①沿主轴方向上的排列顺序order: 0(默认值) | <integer整数>
作用:设置项目沿主轴方向上的排列顺序,数值越小,排列越靠前,属性值为整数。
②项目的收缩因子flex-shrink: 1(默认值) |
作用:时当项目在主轴方向上溢出,通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子,属性值取非负数
未设置flex-shrink时,默认flex-shrink值为1
案例:总权重为:120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。参与计算的溢出空间不再是50px,而是50 * (0.1 + 0.2 + 0.3) / 1 =30:
item1的最终宽度为:120 - 30 * 120 * 0.1 / 96 ≈ 116px
item2的最终宽度为:150 - 30 * 150 * 0.2 / 96 ≈ 140px
item3的最终宽度为:180 - 30 * 180 * 0.3 / 96 ≈ 163px
③项目的扩张因子flex-grow: 0(默认值) |
grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,此时flex-grow就可以使得子元素扩张,分享父元素的空间。
取值:flex-grow的默认值为0,意思是该元素不索取父元素的剩余空间,如果值大于0,表示索取。
④项目width属性替代品flex-basis: auto(默认值) | px
当容器设置flex-direction为row或row-reverse,flex-basis和width同时存在,flex-basis优先级高于width,也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse,flex-basis和height同时存在,flex-basis优先级高于height,就是此时flex-basis代替height属性。
需要注意的是,当flex-basis和width(或height),其中一个属性值为auto时,非auto的优先级更高。
⑤flex-grow、flex-shrink、flex-basis的简写方式:flex 属性
值设置为none,等价于00 auto。值设置为auto,等价于1 1 auto。
⑥项目在行中交叉轴方向上的对齐方式align-self: auto(默认值) | flex-start | center | flex-end | baseline |stretch
设置项目在行中交叉轴方向上的对齐方式,用于覆盖容器的align-items,可以对项目的对齐方式做特殊处理。
默认属性值为auto,继承容器的align-items值,当容器没有设置align-items时,属性值为stretch。