一.flex属性1.父容器常用属性六个:flex-direction:row|row-reverse|column|column-reverse;主轴的方向(项目的排列方向)flex-wrap:wrap|nowrap|wrap-reverse;换行方式flex-flow是flex-direction和flex-wrap的结合justify-content:flex-start|flex-end|center|space-between|space-around;//主轴方向的对齐方式align-items:flex-start|flex-end|center|basline|stretch;//交叉轴方向的对齐方式align-content:flex-start|flex-end|center|space-between|space-around|stretch(多个主轴的排序方式)2.子容器(子项目)常用属性六个:order:<integer>;数值越排序越靠前align-self:auto | flex-start | flex-end | center | baseline | stretch;允许单个项目和整体项目不一样的对齐方式flex-group:<number>;默认值是0,即存在剩余空间也不放大;如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。flex-shrink:<number>;默认值是1,如果该项目空间不足,将等比例缩小;如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。flex-basis:<length> | auto; / default auto /剩余空间没分配前,子项目占据的主轴空间。flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值是0,1,auto;flex:1;指flex-grow:1;flex-shrink:1;flex-basis:auto;
flex
January 7, 2019 · 1 min · jiezi