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:auto;