Flex佈局 Flexbox屬性具體解釋

原文：A Visual Guide to CSS3 Flexbox Properties

Flex佈局官方稱爲CSS Flexble Box佈局模型是CSS3爲了提升元素在容器中的對齊、方向、順序，甚至它們是動態的或者不肯定大小的新佈局模型。

Flex容器的主要特徵是能夠調整其子元素在不一樣的屏幕大小中能夠用最適合的方法填充合適的空間 。

很是多的設計師和開發人員發現Flex佈局很是easy使用，它定位元素簡單所以很是多複雜的佈局能夠用很是少的代碼實現，引領更簡單的開發過程。Flex佈局的算法是基於方向的。不一樣於基於水平或者垂直的block和inline佈局，這樣的Flex佈局能夠被用在小的應用組件中。而CSS3 網格佈局模型是新興處理大規模的佈局。

本文主要解說flex的每個屬性如何栩栩如生的影響佈局。

一、基本概念:

在開始描寫敘述Flexbox屬性以前，咱們先小小的介紹一下Flexbox模型，Flex佈局由父容器稱爲Flex容器（flex-container）和它直接的子元素稱爲flex 項目（flex-item）構成，在下文中將它們簡稱爲「容器」和「項目」。

在上圖中你可以看到用來描寫敘述Flex容器和它的子元素的屬性和術語。你可以閱讀W3C的官方文檔來了解他們的意思。

• flex容器有兩個參考的軸：水平的主軸（main axis）和交叉的軸（cross axis）。
• 主軸的開始位置main start。主軸結束位置main end。
• 交叉軸的開始位置叫作cross start，結束位置叫作cross end。
• 直接子元素「項目」沿主軸排列；
• 單個項目佔領的主軸空間叫作main size，佔領的交叉軸空間叫作cross size。

Flexbox是2009年W3C提出的新佈局方案，這裏用的是2014年9月的最新標準。它的最新的瀏覽器支持狀況

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

二、使用方法:

使用flex佈局首先在HTML中的父元素上設置display屬性：

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

或者你想讓它像內聯元素同樣。可以這樣寫：

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

注意：這是惟一的要設置在父容器上的屬性，所有的直接子元素會成爲本身主動flex項目。

三、flexbox 容器的屬性：

flex-direction:row(默認值) | row-reverse | column | column-reverse;

該屬性指定了Flex的項目如何在flex容器中排列，設置flex容器的主軸方向，它們(項目)兩個基本的方向排列，就像一行同樣水平排列或者像一列同樣垂直排列。

values：

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}

row 方向代表flex項目在一行中從左到右堆放在容器中。

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

row-reverse 方向代表flex項目從右到左堆放。

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

column 方向指明flex項目在一列中從頂部究竟部堆放

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

column-reverse 方向指明flex項目在一列中從底到頂部堆放

 flex-wrap:nowrap(默認值) | wrap | wrap-reverse;

初始狀況下，Flexbox的理念是所有的項目都排列在一條線上（軸線），flex-wrap 屬性控制容器是否將它的項目排列在一行或者多行，並且控制新行堆疊的方向。

values：

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
}

flex項目會排列在一條線上並且它們會縮放適應到容器的寬。

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

項目(flex items)會在多行展現，假設需要的話它們可以從左到右或者從上到下排列。

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}

 flex-flow: <flex-direction> || <flex-wrap>;

該屬性是上面兩個屬性的簡寫方式，前一個參數設置flex-direction，後一個參數設置flex-wrap;

values：

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

默認值： row nowarp

 justify-content:flex-start(默認值) | flex-end | center | space-between | space-around;

定義了項目在容器主軸上的對齊方式。當的容器中項目都是一行並且非彈性的時候或者項目是彈性的但是達到了它們的最小寬度的時候該屬性可以定義容器中的剩餘空間的分配。

values：

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
          flex-start;
}

所有項目向容器的左邊對齊

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

所有項目向容器的右邊對齊

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

所有項目在容器中居中對齊

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

第一個和最後一個項目向容器的邊界對齊，剩餘的空間各個項目等分

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

所有的項目等分剩餘的容器空間。包含第一個和最後一個項目（因此項目之間的間隔比第一個和最後一個項目與容器邊框的間隔大一倍）。

 align-items:flex-start | flex-end | center | baseline | stretch(默認值);

定義項目在交叉軸上的對齊方式，交叉軸與當前的軸線有關係，與justify-content很是類似，僅僅只是是垂直方向的；這屬性爲所有的項目設置默認的交叉軸上的對齊方式，包含匿名的。

values：

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

項目會填充容器的整個高或者寬(fill the whole height )，從容器交叉軸的起點到交叉軸的結束點。

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}

項目會堆放在容器交叉軸的起始位置（cross start ）。

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}

項目會堆放在容器交叉軸的結束位置（cross end ）。

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}

項目會堆放在容器交叉軸的居中位置（ center of the cross axis ）

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items:         baseline;
}

所有項目的基線會對齊

基線？不知道基線是什麼請戳這裏-->基線是什麼?

 align-content:flex-start | flex-end | center | space-between | space-around | stretch(默認值);

當交叉軸上還有多餘的空間時它定了多行的對齊方式，相似justify-content在主軸上對齊所有項目的方式同樣。

values：

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}

每一行的項目後面等比分配了交叉軸上的多餘空間。

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}

項目在容器的交叉軸起始點上堆放在一塊兒。

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}

項目在容器的交叉軸結束點上堆放在一塊兒。

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}

項目的行被堆放在容器的交叉軸線中間。

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

與justify-content相似，項目的行距離在容器的交叉軸線上被等分。第一行和末尾的一行與容器的邊緣對齊。

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}

與justify-content相似，項目的行等分了容器的交叉線上的剩餘空間，第一行和最後一行相同也獲得了一些，它們之間的間隔比首行和末行到容器邊界的間隔大一倍。

注意：這個屬性只當容器中有多行的項目時有效，假設所有項目只佔一行，那這個屬性對佈局沒有不論什麼影響。

四、Flexbox 項目屬性

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>

order屬性控制容器的直接子元素在容器中的順序。默認在容器中這些項目是以該數字遞增的方式排列的。

values:

values:
.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}

該屬性可以很是easy的控制項目的順序，而不用在HTML代碼裏面作調整。這個整形值可以爲負數，默認值是 0。

<span style="font-size:14px;">flex-grow: <number></span>

該屬性指定項目的生長因素，它肯定了當容器有剩餘空間分配的時候相對於其它的項目當前的項目能夠添加多少寬度。
values:

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

當所有的項目的flex-grow值相等的時候它們的size一樣。

第二個項目佔用了不少其它的剩餘空間。

默認值是：0
注意：負數在這個屬性中是沒實用的

flex-shrink: <number>

該屬性指定了項目的收縮因素，它肯定了當容器還有剩餘空間收縮的時候該項目相對於其它項目的收縮多少。

values:

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

默認狀況下，所有的項目都會收縮，但是當咱們設置該屬性的值爲0的時候。項目會保持原有的大小。


默認值是：1
注意：負數在這個屬性中是沒實用的

flex-basis：auto | <width>

該屬性的值和width和height的取值同樣，在 flex factors分配剩餘空間以前指定項目的初始的大小。

values:

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

默認值：auto

flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

該屬性是flex-grow, flex-shrink 和flex-basis的縮寫形式，同一時候屬性值也有簡寫：auto表示(1,1,auto)。none表示(0,0,auto)

values:

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

注意： W3C鼓舞使用flex的簡寫形式。因爲flex在使用過程當中會順便初正確的又一次設置沒有肯定的組件到常見使用方法。

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

該屬性和容器的align-items屬性有相同的做用。它是用在單一的項目上的，可以全然壓倒容器中align-items定義的對齊方式。

values:

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

注意：auto 表示項目會使用父元素（容器）的align-items的值。假設該項目沒有父元素的話align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align這些屬性對於項目(flex item)會失效。