彈性容器：包含著彈性專案的父元素。通過設定 display 屬性的值為 flex 或 inline-flex 來定義彈性容器。
彈性專案(flex item)：彈性容器的每個子元素都稱為彈性專案。彈性容器直接包含的文字將被包復成匿名彈性 專案。也可以稱為子容器。
軸(axis)：每個彈性框布局包含兩個軸。彈性專案沿其依次排列的那根軸稱為主軸(main axis)。垂直於主軸的 那根軸稱為側軸(cross axis)。
方向(direction)：可以通過 flex-direction 來確定主軸和側軸的方向。
預設情況下，主軸的方向是從左到右。在主軸方向上，可以通過 justify-content 屬性來設定他們的排列方式。排列 方式有以下幾種：
flex-start ：專案靠近父盒子的左側。預設採用的就是這種排列方式。示例圖如下：
flex-end ：專案靠近父盒子的右側。
center ：所有專案會挨在一起在父盒子的中間位置。
space-around ：專案沿主軸均勻分布，位於首尾兩端的子容器到父容器的距離是子容器間距的一半。
space-between ：專案沿主軸均勻分布，位於首尾兩端的子容器與父容器緊緊挨著。
space-evenly ：專案在主軸上均勻分布，收尾兩端的自容器到父容器的距離跟自容器間的間距是一樣的。
預設情況下，側軸的方向是從上到下。在側軸方向上，可以通過 align-items 屬性來設定他們的排列方式。排列方 式有以下幾種：
flex-start ：起始端對齊。預設就是這種對齊方式。
flex-end ：末尾段對齊
center ：中間對齊。
stretch ：如果專案沒有設定高度。那麼子容器沿交叉軸方向的尺寸拉伸至與父容器一致。
baseline ：基線對齊，這裡的 baseline 預設是指首行文字，所有子容器向基線對齊，交叉軸起點到元素基線 距離最大的子容器將會與交叉軸起始端相切以確定基線
主軸預設的方向是從左到右，側軸的方向預設是從上到下，當然也可以進行修改。可以通過 flex-direction 進行修 改。可以修改的引數為以下：
row ：預設屬性。從左到右。
row-reverse ：從右到左。
column ：從上到下。
column-reverse ：從下到上。
nowrap ：不換行。預設的。
wrap ：換行。
wrap-reverse ：換行，但是第一行會在下面。
flex-start ：從上往下排列。
flex-end ：末尾段對齊。
center ：中點對齊。
space-between ：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around ：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch ：預設方式，如果沒有給元素設定高度，那麼會佔滿整個交叉軸。
定義了在分配多餘空間之前，專案佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間。
.item設定元素是否需要擴大的比例。預設值為0，即如果存在剩餘空間，也不放大。
定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小
flex屬性是 flex-grow flex-shrink flex-basis 三個屬性的簡寫。假設以上三個屬性同樣取預設值，則 flex 的預設值 是 0 1 auto 。 關於 flex 的取值，有以下幾種方式：
auto ：等價於 1 1 auto 。也就是允許增長，允許縮小，寬度為自動。
none ：等價於 0 0 auto 。也就是不允許增長，不允許縮小，寬度為自動。
非負數字：這個數字表示的是 flex-grow 的值， flex-shrink 為1，表示允許縮小， flex-basis 為0%。可以認為 他就是把剩餘的空間進行填充。比如以下**是等價的：
.item .item.item .itemflex布局詳解
2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 fl...
flex 布局詳解
布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著...
flex布局引數詳解
首先display的幾種顯示方式 那下面總結了flex布局的詳細引數 1 justify content 控制主軸方向的對齊方式 justify content center 主軸方向居中對齊 justify content flex start 從主軸開始的方向堆疊 justify content...