Flex佈局 Flexbox屬性詳解

Flex佈局官方稱爲CSS Flexble Box佈局模型是CSS3爲了提升元素在容器中的對齊、方向、順序，甚至它們是動態的或者不肯定大小的新佈局模型。Flex容器的主要特徵是可以調整其子元素在不一樣的屏幕大小中可以用最適合的方法填充合適的空間 。

不少的設計師和開發者發現Flex佈局很容易使用，它定位元素簡單所以不少複雜的佈局可以用不多的代碼實現，引領更簡單的開發過程。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屬性：

 

1.  
   .flex-container {
2.  
   display: -webkit-flex; /* Safari */
3.  
   display: flex;
4.  
   }

或者你想讓它像內聯元素同樣，能夠這樣寫：

1.  
   .flex-container {
2.  
   display: -webkit-inline-flex; /* Safari */
3.  
   display: inline-flex;
4.  
   }

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

 

三、flexbox 容器的屬性：

 

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

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

 

values：

 

1.  
   .flex-container {
2.  
   -webkit-flex-direction: row; /* Safari */
3.  
   flex-direction: row;
4.  
   }

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

 

 

 

1.  
   .flex-container {
2.  
   -webkit-flex-direction: row-reverse; /* Safari */
3.  
   flex-direction: row-reverse;
4.  
   }

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

 

 

1.  
   .flex-container {
2.  
   -webkit-flex-direction: column; /* Safari */
3.  
   flex-direction: column;
4.  
   }

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

 

 

1.  
   .flex-container {
2.  
   -webkit-flex-direction: column-reverse; /* Safari */
3.  
   flex-direction: column-reverse;
4.  
   }

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

 

 

 

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

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

values：

1.  
   .flex-container {
2.  
   -webkit-flex-wrap: nowrap; /* Safari */
3.  
   flex-wrap: nowrap;
4.  
   }

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

 

 

 

1.  
   .flex-container {
2.  
   -webkit-flex-wrap: wrap; /* Safari */
3.  
   flex-wrap: wrap;
4.  
   }

項目(flex items)會在多行展現，若是須要的話它們能夠從左到右或者從上到下排列。

 

 

1.  
   .flex-container {
2.  
   -webkit-flex-wrap: wrap-reverse; /* Safari */
3.  
   flex-wrap: wrap-reverse;
4.  
   }

 

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

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

 

values：

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

 

默認值： row nowarp

 

 

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

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

values：

1.  
   .flex-container {
2.  
   -webkit-justify-content: flex-start; /* Safari */
3.  
   flex-start;
4.  
   }

全部項目向容器的左邊對齊

 

 

 

1.  
   .flex-container {
2.  
   -webkit-justify-content: flex-end; /* Safari */
3.  
   justify-content: flex-end;
4.  
   }

全部項目向容器的右邊對齊

 

 

 

 

1.  
   .flex-container {
2.  
   -webkit-justify-content: center; /* Safari */
3.  
   justify-content: center;
4.  
   }

全部項目在容器中居中對齊

 

 

 

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

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

 

 

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

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

 

 

 

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

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

values：

1.  
   .flex-container {
2.  
   -webkit-align-items: stretch; /* Safari */
3.  
   align-items: stretch;
4.  
   }

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

 

 

1.  
   .flex-container {
2.  
   -webkit-align-items: flex-start; /* Safari */
3.  
   align-items: flex-start;
4.  
   }

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

 

 

 

1.  
   .flex-container {
2.  
   -webkit-align-items: flex-end; /* Safari */
3.  
   align-items: flex-end;
4.  
   }

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

 

1.  
   .flex-container {
2.  
   -webkit-align-items: center; /* Safari */
3.  
   align-items: center;
4.  
   }

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

 

 

1.  
   .flex-container {
2.  
   -webkit-align-items: baseline; /* Safari */
3.  
   align-items: baseline;
4.  
   }

全部項目的基線會對齊

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

 

 

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

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

 

values：

1.  
   .flex-container {
2.  
   -webkit-align-content: stretch; /* Safari */
3.  
   align-content: stretch;
4.  
   }

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

 

1.  
   .flex-container {
2.  
   -webkit-align-content: flex-start; /* Safari */
3.  
   align-content: flex-start;
4.  
   }

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

 

 

 

 

1.  
   .flex-container {
2.  
   -webkit-align-content: flex-end; /* Safari */
3.  
   align-content: flex-end;
4.  
   }

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

 

 

 

1.  
   .flex-container {
2.  
   -webkit-align-content: center; /* Safari */
3.  
   align-content: center;
4.  
   }

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

 

 

 

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

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

 

 

 

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

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

注意：這個屬性僅僅當容器中有多行的項目時有效，若是全部項目僅僅佔一行，那這個屬性對佈局沒有任何影響。

 

四、Flexbox 項目屬性

 

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

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

values:

1.  
   values:
2.  
   .flex-item {
3.  
   -webkit-order: <integer>; /* Safari */
4.  
   order: <integer>;
5.  
   }

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

 

 

 

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

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

 

 

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

 

當全部的項目的flex-grow值相等的時候它們的size相同。

第二個項目佔用了更多的剩餘空間。

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

 

 

 

flex-shrink: <number>

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

 

values:

 

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

 

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


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

 

 

flex-basis：auto | <width>

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

 

values:

 

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

默認值：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:

 

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

注意： W3C鼓勵使用flex的簡寫形式，由於flex在使用過程當中會順便初正確的從新設置沒有肯定的組件到常見用法。

 

 

 

 

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

該屬性和容器的align-items屬性有一樣的做用，它是用在單一的項目上的，能夠徹底壓倒容器中align-items定義的對齊方式。
values:

 

 

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

 

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

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

(轉發) https://blog.csdn.net/baiding1123/article/details/47663217