傳統的布局方式都是基於盒狀模型, 依靠與 display + position + float 方式來實現.
在css3中增加了一種新的布局方案–flex布局.
flex是flexible box(彈性布局)的縮寫.
將元素置為flex布局.只要在需要使用flex布局的元素中新增display: flex屬性即可.
1. block元素
.box
.box
1. 元素介紹: 使用flex布局的父元素叫做flex容器(flex container).每乙個子元素都稱為flex專案(flex item).
2. main axis: 水平的主軸(x軸).主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；
3. cross axis垂直的交叉軸(y軸):交叉軸的開始位置叫做cross start，結束位置叫做cross end
4. main size: flex容器中的flex item所佔據的主軸空間,也就是width.
5. cross size: flex容器中的flex item所佔據的交叉空間,也就是height
3.1. 容器中的屬性: 也就是採用flex布局的容器可以使用的屬性.
.box
.box
.box
.box.box
*3.1.6 align-content: 多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用, 也就是在容器中會顯示多行資料。可取值為:
*flex-start：與交叉軸的起點對齊。
*flex-end：與交叉軸的終點對齊。
*center：與交叉軸的中點對齊。
*space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
*space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
*stretch（預設值）：軸線佔滿整個交叉軸。
3.2.專案的屬性
.item
.item
//flex-griow的計算方式:每個子元素的擴充套件量為.
w = (子元素flex-grow值 /所有子元素flex-grow的總和) * 剩餘值
// 所以子元素的 寬度 = 子元素flex-basis值 + w
.item
// 縮小量的計算:
1. 加權值 = son1 + son2 + …. + sonn；
那麼壓縮後的計算公式就是
2. 壓縮後寬度 w = (子元素flex-basis值 * (flex-shrink)/加權值) * 溢位值(不足的空間量)
3. 每個子元素的寬度 = 子元素flex-basis值 - w
負值對該屬性無效。
*3.2.4 flex-basis屬性:定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小
.item
*3.2.5 flex屬性:是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選
.item
.item
flex 布局教程：語法篇
a complete guide to flexbox
flex-grow、flex-shrink屬性計算方式
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 布局，可以簡便 完整 響應式地實現各種頁...