Flex 佈局（layout）
Flex是Flexible Box（彈性盒）的縮寫，意爲”彈性佈局”。網頁佈局（layout）是 CSS 的一個重點應用。佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便。
2009年，W3C提出了一種新的方案——Flex佈局（Flex layout），可以簡便、完整、響應式地實現各種頁面佈局。注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。Internet Explorer 9 及更早版本不支持 flex 屬性。
採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱”容器”。它的所有子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱”項目”。
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
任何一個容器都可以指定爲Flex佈局。
【在HTML開發中我們常常會使用一類標籤作爲容器放置一些內容，我們把這類標籤稱之爲容器標籤，可以作爲容器標籤的包括列表標籤、表格標籤、框架標籤、佈局標籤。參見
https://www.cnblogs.com/yunxiansheng/p/9190454.html】
使用Flex 佈局（layout），需要了解下面屬性語法
flex 屬性
flex-basis 屬性
flex-direction 屬性
flex-flow 屬性
flex-grow 屬性
flex-shrink 屬性
flex-wrap 屬性
首先學習flex 屬性
實例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex測試</title>
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1; <!--請注意這裏將 flex:1;換爲 flex: auto; 試試 -->
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">紅色</div>
<div style="background-color:lightblue;">藍色</div>
<div style="background-color:lightgreen;">帶有更多內容的綠色 div</div>
</div>
<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 屬性。</p>
</body>
</html>
將上面實例代碼，保存的flex01.html文件，用瀏覽器打開運行，顯示如下：
將 flex:1;換爲 flex: auto; 用瀏覽器打開運行，顯示如下：
flex 屬性語法
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
此屬性可取值積極含義：
進一步說明
flex 屬性可以指定1個，2個或3個值。
單值語法: 值必須爲以下其中之一:
一個無單位數(<number>): 它會被當作<flex-grow>的值。
一個有效的寬度(width)值: 它會被當作 <flex-basis>的值。
關鍵字none，auto或initial.
雙值語法: 第一個值必須爲一個無單位數，並且它會被當作 <flex-grow> 的值。第二個值必須爲以下之一：
一個無單位數：它會被當作 <flex-shrink> 的值。
一個有效的寬度值: 它會被當作 <flex-basis> 的值。
三值語法:
第一個值必須爲一個無單位數，並且它會被當作 <flex-grow> 的值。
第二個值必須爲一個無單位數，並且它會被當作 <flex-shrink> 的值。
第三個值必須爲一個有效的寬度值， 並且它會被當作 <flex-basis> 的值。
initial
元素會根據自身寬高設置尺寸。它會縮短自身以適應 flex 容器，但不會伸長並吸收 flex 容器中的額外自由空間來適應 flex 容器 。相當於將屬性設置爲"flex: 0 1 auto"。
auto
元素會根據自身的寬度與高度來確定尺寸，但是會伸長並吸收 flex 容器中額外的自由空間，也會縮短自身來適應 flex 容器。這相當於將屬性設置爲 "flex: 1 1 auto".
none
元素會根據自身寬高來設置尺寸。它是完全非彈性的：既不會縮短，也不會伸長來適應 flex 容器。相當於將屬性設置爲"flex: 0 0 auto"。
<'flex-grow'>
定義 flex 元素的 flex-grow 屬性，詳見 <number>。默認值爲 0，負值無效。
<'flex-shrink'>
定義 flex 元素的 flex-shrink 屬性，詳見 <number>。默認值爲1，負值無效。
<'flex-basis'>
定義 flex 元素的 flex-basis 屬性。若值爲0，則必須加上單位，以免被視作伸縮性。 默認值爲 auto。
flex-basis 屬性
實例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> flex-basis測試</title>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
#main div:nth-of-type(2) {
flex-basis: 80px; <!--請注意這裏-->
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
</div>
<p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 flex-basis 屬性。</p>
</body>
</html>
將上面實例代碼，保存的flex02.html文件，用瀏覽器打開運行，顯示如下：
flex-basis 屬性語法
flex-basis: number|auto|initial|inherit;
此屬性可取值積極含義：
就介紹到這裏吧。
要想更多學習，可參考：