tips：行內元素也可以使用 flex 布局
.box
概念：採用 flex 布局的元素，稱為 flex 容器，簡稱"容器"
它的所有子元素自動成為容器成員，稱為 flex 專案，簡稱"專案"
六個屬性：
1. flex-direction: row | row-reverse | column | column-reverse;
設定主軸的方向，及專案的排列方向：從左到右（預設），從上到下，從下到上，從右到左。
2. flex-wrap：nowrap | wrap | wrap-reverse;3. flex-flow: flex-direction || flex-wrap;
前兩者的簡寫
4. justify-content：flex-start | flex-end | center | space-between | space-around | space-evenly
定義專案在主軸的對齊方式：靠近起點，靠近終點，居中，
中間留白，兩側中間都留白
注意：
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
理解：就是定義藍方塊再紅線上的排列方式，想象它是乙個羊肉串哈哈。
交叉軸的對齊方式：
定義多根軸線的對齊方式
理解：此時，專案有了換行，於是想象成有了多個主軸，因此我們就要規定這些主軸的排列方式，於是就有了align-conten屬性。控制紅線的排列方式，想象成是多個羊肉串在烤架上。
指定專案的放大比列
3. flex-shrink：
指定該項目的縮小比例
4. flex-basis：可以用px單位，如100px
指定專案再分配多餘空間的時候，專案佔據主軸的空間
5. flex：預設值為0 1 auto
前三者的簡寫
快捷值小結：
auto (1 1 auto)
none (0 0 auto)
1 (1 1 0%)
1 2 (1 2 0%)
div
/* 等同於 */
div
參考：阮老師的部落格寫的是真清楚，愛了~~
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 布局，可以簡便 完整 響應式地實現各種頁...