flexbox彈性佈局

flexbox的核心是自適應動態變化的彈性佈局

伸縮佈局盒模型和術語

主軸
main axis:Flex容器的主軸主要用來配置Flex項目。注意，它不必定是水平，這主要取決於flex-direction屬性。
main-start | main-end:Flex項目的配置從容器的主軸起點邊開始，往主軸終點邊結束。
main size:Flex項目的在主軸方向的寬度或高度就是項目的主軸長度，Flex項目的主軸長度屬性是width或height屬性，由哪個對着主軸方向決定。

側軸
cross axis:與主軸垂直的軸稱做側軸，是側軸方向的延伸。
cross-start | cross-end:伸縮行的配置從容器的側軸起點邊開始，往側軸終點邊結束。
cross size:Flex項目的在側軸方向的寬度或高度就是項目的側軸長度，Flex項目的側軸長度屬性是width或height屬性，由哪個對着側軸方向決定。

 設置父容器的屬性有

.container{
    display: flex | inline-flex;
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | 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 | baseline | strtch;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 設置子元素的屬性有

.item{
    order: number;
    flex-grow: number; /* default 0 */
    flex-shrink: number; /* default 1 */
    flex-basis: number | auto; /* default auto */
    flex: none | @flex-grow @flex-shrink @flex-basis;
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 flex-direction 顯示方向

.container{
　　　display: flex;
　　　flex-direction: row | row-reverse | column | column-reverse;
}

• row:默認值,從左至右，從上到下;
• row-reverse: 伸縮項目則是從右往左顯示。
• column: 主軸和側軸交換。若是書寫系統是垂直的，那麼伸縮項目也是垂直顯示的。
• column-reverse: 和 column 同樣，可是方向相反。

 

 

 

 flex-wrap 伸縮行換行

.container{
    display: flex;
    flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap : 默認值,一行顯示
• wrap : 在一個伸縮行容不下全部伸縮項目時，伸縮項目會換行到一條新增的伸縮行上。新增的伸縮行根據側軸的方向添加。
• wrap-reverse : 與wrap方法向反;

 

flex-flow 伸縮方向與換行 flex-flow 是 flex-direction 和 flex-wrap 的縮寫

.flex-container {
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

 

 justify-content 主軸對齊

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start : 左對齊（默認）;
• flex-end : 右對齊;
• center : 居中對齊;
• space-between : 兩端對齊;
• space-around :平均分佈;

 

 align-items 側軸對齊

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start : 頂部對齊（默認）;
• flex-end : 底部對齊;
• center : 居中對齊;
• baseline :文本基線對齊。基線根據伸縮項目的內容計算獲得;
• stretch : 上下對齊並鋪滿,此屬性子元素不能有固定高度;將伸縮項目從側軸起點拉伸到側軸終點。

 

 align-content 堆棧伸縮行(該屬性只針對父容器內多行的狀況,如設置了flex-wrap:wrap;屬性斷行)

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• flex-start : 頂部對齊(默認)
• flex-end : 底部對齊;
• center : 居中對齊
• space-between : 兩端對齊;
• space-around :平均分佈;
• stretch : 上下對齊並鋪滿,此屬性子元素不能有固定高度;將伸縮項目從側軸起點拉伸到側軸終點。

 

 order 顯示順序,數值小的排在前面。能夠爲負值。

.item {
  order: <integer>;
}

 

 flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] //默認狀況下，flex的值是 }0 1 auto;

• flex :1; /*空間被平均分配*/
• flex :2; /*某項目佔2個空間點*/
• flex: auto; /*自動伸縮以佔用全部剩餘空間,與flex:1同樣*/
• flex: none; /*在任何狀況都不會發生伸縮*/

　　float，clear和vertical-align屬性在Flex項目中無效

 

flex-shrink: 0;固定大小,不會收縮

flex-basis

flex-basis屬性告訴父容器，在剩餘空間被分配以前先定義子元素的默認尺寸，能夠指定爲百分比或rem等長度單位或者auto關鍵字。

flex-basis: 0將父容器的所有空間按比例分配到每一個子元素上，下面咱們就來爲每一個子元素添加flex-basis: 0屬性：

 

 align-self 單個項目的側軸對齊(它的值和 align-items 同樣)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• flex-start : 頂部對齊（默認）;
• flex-end : 底部對齊;
• center : 居中對齊;
• baseline :文本基線對齊。基線根據伸縮項目的內容計算獲得;
• stretch : 上下對齊並鋪滿,此屬性子元素不能有固定高度;將伸縮項目從側軸起點拉伸到側軸終點。