10分鐘理解CSS3 FlexBox

基本介紹

特色

1. flexbox是一種css display類型，提供一種更簡單高效的佈局方式；
2. flexbox能夠對元素相對於父元素、兄弟元素進行定位、控制尺寸、控制間距；
3. flexbox對響應式有很好的支持；

工做原理

設置父元素的display屬性爲flex，則子元素都變成flex item，由此能夠控制子元素的排列方式、尺寸、間距等；

兼容性

Flex Container

先來看一個最簡單的flex示例，外層div設置display: flex成爲一個flex container，內部的3個div則自動變爲flex item：

html:

<div class="flex-container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

效果：

效果與浮動佈局相似，可是若是用浮動實現的話須要寫更多的代碼，而flex一行就搞定了。

1. Justify Content

若是咱們想讓flex item居中排列呢，咱們能夠給flex container增長一個css屬性：justify-content，它控制flex item在主軸方向（main axis，由flex-drection決定，默認爲水平方向）上的對齊方式：

.flex-container{
  ...
  justify-content: center;
}

效果如圖：

除此以外justify-content還能夠設置爲flex-start, flex-end, space-around, space-between, space-even等值，具體效果請自行實驗。

2. Align Items

實現了flex方向的居中後，垂直於主軸方向（cross axis）的居中能夠用align-items實現。

css：

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  justify-content: center;
  height: 200px;
  background-color: white;
  align-items: center;
}

效果：

使用flex解決了以往css垂直居中實現複雜的問題！相應的，align-items還有flex-start, flex-end等其餘值。

3. Flex Direction

flex-direction決定了主軸方向即flex item排列方向，除了默認的row方向以外，還能夠縱向、反向（row-reverse/column-reverse）排列flex item：

css：

.flex-container{
  ...
  
  flex-direction: column;
  align-items: center;
}

效果：

4. Flex Wrap

若是咱們不想在窗口變窄的狀況下壓縮flex item，而是讓超出邊界的flex item換行顯示那咱們能夠設置flex container的flex-wrap：

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.box{
  height: 100px;
  min-width: 300px;
  flex-grow: 1;
}

當咱們壓縮窗口的時候，效果以下：

flex wrap還有一個值：wrap-reverse，設置該值後，被wrap的元素會排到其餘元素上面：

因而可知，flex wrap必定程度上能夠取代media query了。

5. Flex Row

最後，flex-direction和flex-wrap能夠合併爲一個屬性flex-flow，好比：flex-flow: row-reverse wrap。

Flex Item

1. Flex Grow

在上面全部的例子中，三個flex item只佔據了flex container小部分空間，若是想讓flex item佔滿flex container咱們須要給flex item設置flex-grow屬性。顧名思義，grow意味着增加，用於控制flex item的尺寸的伸展。

將css修改成:

.box { 
    height: 100px; 
    min-width: 100px; 
    flex-grow:1; 
}

效果：

能夠看到三個子元素平分了父元素的空間，由於此時它們的flex-grow都是1。若是隻有一個子元素設置了flex-grow呢？

css：

.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; }

效果：

此時two和three的大小不變，而one佔據了父元素剩餘空間。

若是將one的flex-grow改成2，而two和three改成1，咱們看看會發生什麼：

css:

.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; }

效果：

能夠看到one的寬度變成了two和three的兩倍，所以flex item的尺寸和flex-grow的值成正比。

2. Flex Shrink

與flex-grow相對的是flex-shrink， flex-shrink用於控制子元素尺寸超過flex container後，對子元素的壓縮。請看示例：

修改box的寬度爲flex container的1/3，one、two、three的flex-shrink分別爲1，2，3：

.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; }

當窗口正常尺寸時，效果以下：

當咱們壓縮窗口使其變得更窄後，效果以下：

當flex container寬度變爲540px後，子元素都被不一樣程度的壓縮了。壓縮後的one、two、three的寬度分別爲250px、180px、110px，因此相比於初始寬度320px被壓縮掉的寬度分別爲70px、140px、210px，70 : 140 : 210 = 1 : 2 : 3，與flex shrink的值成反比。實際上壓縮率和flex item的初始尺寸也有關係，只不過當初始尺寸同樣時它帶來的影響被忽略了。

假設flex shrink爲fs，flex item的初始尺寸爲is，flex item被壓縮的尺寸爲ss，則正確的表達式爲：

fs ∝ is/ss

3. Flex Basis

flex-basis用於設置flex item的初始寬/高。爲何有width和height還須要從新加一個flex-basis呢？flex-basis和width/height有以下的區別：

1. flex-basis只能用於flex-item，而width/height能夠應用於其餘類型的元素；
2. flex-basis和flex-direction有關，當flex-direction爲row的時，flex-basis設置的是寬度，當flex-direction爲column時，flex-basis設置的是高度；
3. 當flex item被絕對定位後（absolute position），flex-basis不起做用，而width/height能夠；
4. flex-basis能夠用於flex的簡寫形式，如：flex: 1 0 200px;

咱們來看一下flex-basis的做用，將css修改以下：

.box{
  height: 100px;
  flex-grow: 1;
}
.one{
  background: pink;
  flex-basis: 100px;
}
.two{
  background: lightgreen;
  flex-basis: 200px;
}
.three{
  background: skyblue;
  flex-basis: 300px;
}

3個flex item都在原來的初始寬度基礎上增長了相同的寬度：

固然，這個例子若是換成使用width也是同樣的效果，可是雖然效果同樣但意義不同，因此使用flex佈局時仍是應該儘可能遵照規範，選合適的人去幹正確的事。

4. Order

經過order屬性咱們能夠改變flex item的排列順序，例如：

html:

<section id="blocks">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</section>

css：

#blocks{
  display: flex;
  margin: 10px;
  justify-content: space-between;
}

#blocks div{
  flex: 0 0 100px;
  padding: 40px 0;
  text-align: center;
  background: #ccc;
}

默認排列順序是按照flex item在html中的出現順序：

當咱們修改flex item的order值後，flex item會按照order值升序排列：

css：

.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; }

效果：

結語

flex就先簡單介紹到這裏，flex很強大也很簡單，但願你們用的開心。