flex

一.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:0%;
flex:auto;指的是1 1 auto;
flex默认值为0 1 auto;