布局的傳統解決方案基於盒子模型，依賴display屬性 +position屬性 +float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。在目前主流的移動端頁面中，使用 flex 布局能更好地完成需求，因此 flex 布局的知識是必須要掌握的。
<輕輕鬆鬆就做出了1：1：3的效果style
type
="text/css"
>
.div1
.div2
.div3
style
>
<
body
>
<
div
class
="div1"
>
<
div
class
="div2"
>www
div>
<
div
class
="div2"
>www
div>
<
div
class
="div2 div3"
>eee
div>
div>
body
>
設定了display: flex的元素，我們稱為「容器」（flex container），其所有的子節點我們稱為「成員」（flex item）。容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做 main start，結束位置叫做 main end；交叉軸的開始位置叫做 cross start，結束位置叫做cross end。專案預設沿主軸排列。單個專案佔據的主軸空間叫做 main size，佔據的交叉軸空間叫做 cross size。
flex-direction可決定主軸的方向，有四個可選值：
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
各個方向的顯示效果見下圖
.flex
justify-content屬性定義了專案在主軸上的對齊方式，有五個可選值：
flex-start（預設值）：向主軸開始方向對齊。
flex-end：向主軸結束方向對齊。
center： 居中。
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
align-items屬性定義專案在交叉軸上如何對齊，也有五個可選值：
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為 auto，將佔滿整個容器的高度。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用，有六個可選值：
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
.flex預設情況下，專案都排在一條線（又稱"軸線"）上。
flex-wrap屬性定義，如果一條軸線排不下，如何換行,它可能取三個值：
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
此外還有order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0；
flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大，如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍；
flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。負值對該屬性無效。
flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小，它可以設為跟width或height屬性一樣的值（比如350px），則專案將佔據固定空間。
flex屬性是flex-grow,flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
參考：
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...