flex布局也就是常說的彈性布局（個人覺得應用的比較廣泛，常用於移動端布局）。當乙個元素的父容器設定display:flex的時候，這個容器就會變成乙個彈性盒子，預設情況下這個盒子裡的子元素都會左右排列（寬度有內容決定，高度由父容器決定），當你給子元素設定高度並且高度超過父容器的高度的時候，他也不會溢位（會自動收縮），因為彈性的優先順序大於自身固定大小。（但是當你給父容器最小寬高的時候，你的子元素還多，並且沒設定折行，那麼在手機上就會出現溢位現象。個人感覺不是很重要）
（主軸與側軸排列方向）（個人感覺弄清主軸和側軸比較重要）（預設情況下主軸側軸是按下面所示）
row：顯示為行（預設值）。方向為當前文件水平流方向，預設情況下從左到右排列
row-reverse：顯示為行，但方向與row屬性值相反
column：顯示為列（主軸側軸換位置）
column-reverse：顯示為列，但方向與column屬性值相反
flex-wrap：是否折行
nowrap：不折行（預設值）
wrap：折行處理
wrap-reverse：反向折行
justify-content：主軸方向上的子項對齊和分布方式
flex-start：子項都去起始位置對齊
flex-end：子項都去結束位置對齊
center：子項都去中心位置對齊
space-between：兩端對齊，多餘的空白區域在中間平均分配
space-around：環繞，每個子項兩側都環繞互不干擾的等距空白，視覺上邊緣的兩側空白只有中間空白的一半
space-evenly：勻稱、平等，視覺上每個子項兩側空白間距完全相等
效果展示
align-items：當子項只有一行時，每一行中子元素的上下對齊方式（最好是只寫一行）
flex-start / flex-end / center（同上）
align-content：當子項多行時，側軸的對齊方式
預設下有幾行就會把容器劃分為幾部分（預設拉伸）
flex-start / flex-end / center / space-between / space-around / space-evenly （同上）
order：排序 數值大的在後面
felx-grow：擴充套件（想要看到擴充套件的效果必須要有空隙）
0：不去擴充套件（預設值）
1：擴充套件（把間隙佔滿）
（補充：子元素會按照設定的比例來分配空隙，如果比例值總和小於1，那麼還會有空隙；如果比例值總和大於1，將不會有空隙但也不會溢位，會收縮）
flex-shrink：收縮
1：會收縮（預設值）
0：不收縮
（補充： 當給的比例值小於1時會收縮的小一些，當比例值大於1時會收縮的大一些）
flex-basis：給子項設定乙個具體的值
align-self：單獨乙個子項的上下對齊方式
flex-start / flex-end / center
flex會常用於移動端布局，所以這些屬性需要記一下，以免自己寫的時候記不住還要翻筆記！！！
HTML 中的 Flex 布局
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box內聯元素也可以使用 flex 布局。boxwebkit 核心的瀏覽器，必須加上 webkit字首。box注意，設為 flex 布局以後，子元素的float ...
學習筆記 HTML5中的FLEX布局
子元素屬性 2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。該屬性規定了將此元素作為乙個flex容器，其中的子元素預設轉化為flex專案 決定主軸的方向 定義如何換行 fle...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...