css之彈性佈局（flex）

• flex主要用於響應式頁面設計，相容各種寬度的裝置
  flex佈局寫法：

div{display:flex;
}

行內元素flex佈局：

span{display:inline-flex;
}

webkit核心的瀏覽器，必須加上-webkit-字首

.box{  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效

• flex佈局的六個屬性
  |  flex-direction |  flex-wrap  |  flex-flow  | justify-content  |  align-items| align-content |

flex-direction

[flex-direction]屬性用來控制上圖中伸縮容器中主軸的方向，同時也決定了伸縮專案的方向。

• flex-direction:row;也是預設值，即主軸的方向和正常的方向一樣，從左到右排列。

• flex-direction:row-reverse;和row的方向相反，從右到左排列。

• flex-direction:column;從上到下排列。

• flex-direction:column-reverse;從下到上排列。 以上只針對ltr書寫方式，對於rtl正好相反了。

網頁展示效果如下：

主軸方向示意圖

flex-wrap

[flex-wrap]屬性控制伸縮容器是單行還是多行，也決定了側軸方向（新的一行的堆放方向）。

• flex-wrap:nowrap;伸縮容器單行顯示，預設值；

• flex-wrap:wrap;伸縮容器多行顯示；伸縮專案每一行的排列順序由上到下依次。

• flex-wrap:wrap-reverse;伸縮容器多行顯示，但是伸縮專案每一行的排列順序由下到上依次排列。

網頁效果見圖：

如何換行示意圖

flex-flow

[flex-flow]屬性為flex-direction（主軸方向）和flex-wrap（側軸方向）的縮寫，兩個屬性決定了伸縮容器的主軸與側軸。

• flex-flow:[flex-direction][flex-wrap];預設值為row nowrap；

舉兩個栗子：

1. flex-flow:row;也是預設值；主軸是行內方向，單行顯示，不換行；

2. flex-flow:row-reverse wrap;主軸和行內方向相反，從右到左，專案每一行由上到下排列（側軸）。

網頁效果如下：

主軸方向與換行示意圖

justify-content

justify-content屬性定義了專案在主軸上的對齊方式

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

主軸對齊方式示意圖

align-items

[align-items]用來定義伸縮專案在側軸的對齊方式，這類似於[justify-content]屬性，但是是另一個方向。（flex-directon和flex-wrap是一對，justify-content和align-items是一對，前者分別定義主軸和側軸的方向，後者分別定義主軸和側軸中專案的對齊方式）。

• align-items:flex-start;伸縮專案在側軸起點邊的外邊距緊靠住該行在側軸起點的邊。

• align-items:flex-end;伸縮專案在側軸終點邊的外邊距靠住該行在側軸終點的邊。

• align-items:center;伸縮專案的外邊距在側軸上居中放置。

• align-items:baseline;如果伸縮專案的行內軸與側軸為同一條，則該值與[flex-start]等效。 其它情況下，該值將參與基線對齊。

• align-items:stretch;伸縮專案拉伸填充整個伸縮容器。此值會使專案的外邊距盒的尺寸在遵照「min/max-width/height」屬性的限制下儘可能接近所在行的尺寸。

  
  

  

  側軸對齊方式示意圖

align-content

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用
相當於同時在主軸和側軸上設定對齊方式

主軸+側軸

flex專案

終於寫到關於伸縮專案的相關屬性了，主要是3個，order，flex（flex-grow，flex-shrink，flex-basis的組合），align-self；用來比較多的是前兩個。

order

有一種用法比較多，想設定一組中有兩個元素一個排第一，另外一個排最後，只需要將第一個的order:-1；另一個為order:0;這樣就好了。

譬如我們想控制一個container中有4個box，想box4為第一個顯示，box1為最後一個顯示。只需要 這樣

    
1
    
2
    
3
    
4

排序示意圖

flex

[flex]屬性可以用來指定可伸縮長度的部件，是flex-grow（擴充套件比例）,flow-shrink（收縮比例）,flex-basis（伸縮基準值）這個三個屬性的縮寫寫法，建議大家採用縮寫的方式而不是單獨來使用這3個屬性。

• flex:none | [ ? || ]
  // flex-grow是必須得flex-shrink和flow-basis是可選的

• flex-grow:;其中number作為擴充套件比例，沒有單位，初始值是0，主要用來決定伸縮容器剩餘空間按比例應擴充套件多少空間。

• flex-grow:;其中number作為收縮比例，沒有單位，初始值是1，也就是剩餘空間是負值的時候此伸縮專案相對於伸縮容器裡其他伸縮專案能收縮的空間比例，在收縮的時候收縮比率會以[flex-basis]伸縮基準值加權。

• flex-basis:|auto;預設是auto也就是根據可伸縮比率計算出剩餘空間的分佈之前，伸縮專案主軸長度的起始數值。若在「flex」縮寫省略了此部件，則「flex-basis」的指定值是長度零。

分配多餘空間

align-self

[align-self]用來在單獨的伸縮專案上覆寫預設的對齊方式，這個屬性是用來覆蓋伸縮容器屬性align-items對每一行的對齊方式。也就是說在預設的情況下這兩個值是相等的。

align-self: auto | flex-start | flex-end | center | baseline | stretch

作者：雨未濃
連結：