任何的屬性值加上 -reverse ： 表示顛倒順序
webkit核心的瀏覽器 需要加上 -webkit-字首
1.flex-direction: row; 預設子元素在父元素上從左向右排列（若不換行，超出元素本身的寬度則平分寬度）
2.flex-direction:row-reverse; 取反，子元素在父元素上從右向左排列
3.flex-direction:column; 子元素在父元素 從上到下 排列
4.flex-direction:column-reverse; 子元素在父元素 從下到上 排列
1.flex-wrap:nowrap; 預設不換行
2.flex-wrap:wrap; 正常換行
3.flex-wrap:wrap-reverse; 子元素在父元素 從下左方嚮往右上方向換行
flex-flow: row nowrap; 預設值，從左向右排列，不換行
1.justify-content:flex-start; 預設左對齊（起始位置對齊）
2.justify-content:flex-end; 右對齊（末尾位置對齊）
3.justify-content:center; x軸居中對齊
4.justify-content:space-between; 兩端對齊，子元素與子元素之間間隔都相等
5.justify-content:space-around; 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
1.align-items:flex-start; 預設頂部對齊（起始位置對齊）
2.align-items:flex-end; 底部對齊（末尾位置對齊）
3.align-items:center; y軸居中對齊
4.align-items:stretch; 預設值，若子元素沒有設定高度 或 設為auto ，則子元素將填滿父元素
1.align-content:flex-start; 交叉軸（y軸）的起點對齊
2.align-content:flex-end; 在可換行的情況下，
交叉軸（y軸）的終點對齊
3.align-content:center; 在可換行的情況下，交叉軸（y軸）居中對齊
4.align-content:stretch; 預設值，若子元素沒有設定高度 或 設為auto，則子元素將填滿父元素
5.align-content:space-between; 交叉軸（y軸）兩端對齊
6.align-content:space-around; 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
order: -1; 子元素的排列順序，數值越小，排名越靠前，預設值為0
flex-grow:2; 有剩餘空間的情況下，子元素的放大比例，預設為0
flex-shrink:3; 無剩餘空間的情況下，子元素的縮小比例，預設值為1；如果有乙個或以上子元素為0，其他子元素為1，則前者不會被縮小
flex-basis: 350px | auto; 在子元素還沒有被分配多餘的空間之前，設定子元素的空間大小，預設值auto
flex： 0 1 auto; 簡寫屬性 ，後兩個屬性可選
快捷鍵 ： flex：auto（1 1 auto） flex：none（0 0 auto）
1.align-self:flex-start; 子元素在交叉軸（y軸）的起點位置對齊
2.align-self:flex-end; 子元素在交叉軸（y軸）的終點位置對齊
3.align-self:center; 子元素在交叉軸（y軸）的居中位置對齊
4.align-self:baseline; 子元素在交叉軸（y軸）的基線位置對齊
5.align-self:stretch; 子元素等同於父元素，不做任何處理
示例：
12
3456
78910
Flex布局介紹
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性 任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用 flex 布局。box 注意，設為 flex 布局以後，子元素的float clear和vertical align屬性將失效。1.f...
flex 彈性布局介紹
介紹更全面 display flex 將容器設定為彈性布局，預設是自左向右依次排列 容器屬性 flex end 靠右對齊 space between 左右兩端對齊,中間補空格，專案之間的距離是相等的 space around 專案之間的間距是左右兩側距離的2倍，也就是 1 2 2 3 space e...
彈性布局flex 介紹
摘自 網頁布局 layout 是css的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布...