首先display的幾種顯示方式
那下面總結了flex布局的詳細引數：
1—justify-content 控制主軸方向的對齊方式
justify-content
: center; 主軸方向居中對齊
justify-content
: flex-start; 從主軸開始的方向堆疊
justify-content
: flex-end; 從主軸結束的地方堆疊
justify-content
: space-between; 子元素之間用空白分割，子元素和父元素邊界沒有空白
justify-content
: space-around; 讓空白在子元素之間，空白寬度兩邊一致，其他地方一致
justify-content
: space-evenly; 將剩餘空間用空白分割，空白的地方是等寬的。
flex-direction
: column 調整主軸方向為垂直方向
flex-direction
:row; 預設的主軸方向為行。
flex-direction
:row-reverse; 調整主軸的方向從右到左開始。
flex-direction
: column-reverse; 調整主軸的方向從下到上。
align-items
: flex-start; 從側周開始地方對齊
align-items
:center; 從側周的中間對齊
align-items
:flex-end; 從側周結束的地方對齊
flex-wrap
: wrap; //子元素總和放不下一行的時候，自動換行
flex-wrap
:nowrap; //預設不換行 自動壓縮子元素的寬度
align-content
:flex-start; 從側軸開始的方向堆疊
align-content
:flex-end; 從側軸結束的方向堆疊
align-content
:center; 從側軸的中間居中堆疊
align-content
:space-around; 讓側軸方向的盒子的剩餘空間用空白分割。
align-content
:stretch; 讓側軸方向的盒子拉伸鋪滿父元素高度（子元素沒設高度的情況下有用。設定高度的情況下，子盒子的高度不被拉伸）
align-content
:space-between; 讓側軸方向的盒子間用空白分割，兩邊貼父元素邊。
align-content
:space-evenly; 讓側軸方向的盒子的剩餘空間用空白均分。空白佔比一致。
6---設定子元素佔父元素的比例，給子元素設定的。
flex:1;
後面的數值表示，所加屬性的這個子元素佔父元素是剩餘的幾份，
已經有寬度的子元素提前分配不包在總份中。
7--- order 設定子元素的排列前後順序
如果想讓最後乙個子元素最開始顯示，可以新增這個 屬性，數字越小，排在越前面。
8--- align-self 如果某子元素想重新調整自己側軸的對齊方式，
就可以用這個，屬性值同側軸調整對齊方式屬性值一樣。
flex布局詳解
2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 fl...
flex 布局詳解
布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著...
詳解Flex布局
彈性容器 包含著彈性專案的父元素。通過設定 display 屬性的值為 flex 或 inline flex 來定義彈性容器。彈性專案 flex item 彈性容器的每個子元素都稱為彈性專案。彈性容器直接包含的文字將被包復成匿名彈性 專案。也可以稱為子容器。軸 axis 每個彈性框布局包含兩個軸。彈...