5、项目的属性
属性值 | 说明 |
---|---|
order | 该属性定义项目的排列顺序,数值越小,排序越靠前,默认为0 |
flex-grow | 该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 |
flex-shrink | 该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小 |
flex-basis | 该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小 |
flex | 该属性是flex-grow, flex-shrink, flex-basis的简写。 |
align-self | 该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性 |
5.1 order
5.2 flex-grow
该属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
(1)如果所有项目的flex-grow均为1,那么所有的项目将均分容器的剩余空间。
(2)如果一个项目的flex-grow为2,其他为1的话,为2的这个项目分配到的剩余空间是其他项目的2倍。
5.2 flex-shrink
该属性定义了项目的缩写比例,默认为1,记如果容器空间不足,则该项目将缩小。
(1)如果所有的项目的flex-shrink均为1,那么所有项目将等比缩小。
(2)如果某一个项目的flex-shrink为0,则该项目不会被缩小。
5.3 flex-basis
该属性定义了在分配多余空间之前,项目占据的主轴空间,默认为auto,即项目本来的大小.
5.4 flex
该属性是flex-grow, flex-shrink, flex-basis的简写。
5.5 align-self
该属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。