项目属性

Posted 2020-09-27 乜**乜

1.flex-grow 属性

flex-grow 属性的值是?一个没有单位的?非负数，默认值为0。?用来定义项当容器?有多余的空间时，这些空 间在不不同条?目之间的分配?比例例。
.item{    flex-grow:1; }

2.order 属性

order 属性定义项?目的排列列顺序。数值越?小，排列列越靠前，默认为0。
.item:nth-child(3){    order:-1; }

3.flex-shrink 属性

flex-shrink 属性在使?用上类似于" flex-grow "。默认值为1。该属性的值也是?无单位的，表示的是当 容器?的空间不不?足时，各个项?目的尺?寸缩?小的?比例例。
.item{    flex-shrink:1; }

4.flex-basis 属性
flex-basis 属性定义了了项?目占据的主轴空间?比例例。浏览器?根据这个属性，计算主轴是否有多余的空间。 它的默认值是auto，即项?目的本来的?大?小。
.item{    flex-basis:50%; }

5.flex 属性 flex 属性是 flex-grow 、 flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性 可选。
.item{    flex:none; }
该属性有两个快捷值：auto(1 1 auto)和none(0 0 auto)。

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