頁面中任何乙個元素都可以指定為 彈性布局(flex)
屬性：display
取值：1、flex 將塊級元素變為彈性布局容器
2、inline-flex 將行內元素變為彈性布局容器
相容性: display:-webkit-flex;
注意：將元素設定為flex後，子元素的 float，clear以及vertical-align屬性將失效
子元素有兩條軸
main axsis : 主軸，預設為橫向軸
cross axsis : 交叉軸，預設為縱向軸
容器（父元素）可以設定容器屬性，用於控制子元素的排列方式
1、flex-direction 指定軸的方向
1. row（主軸為橫軸，起點在左端，預設值）
2.row-reverse 主軸為橫軸，起點在右端
3.column 主軸為交叉軸（縱軸），起點在頂端
4.column-reverse 主軸為交叉軸（縱軸），起點在底
2、flex-wrap 一行內顯示不下所有專案時，如何換行
1.nowrap 預設值，不換行，會將專案等比縮放
2.wrap 換行
3.wrap-reverse 換行，第一行在下方（從下往上的意思，如圖）
3、flex-flow 是 flex-direction 和 flex-wrap的縮寫 （預設值為row nowrap）
4、justify-content 定義了子元素在主軸上的對齊方式
1.flex-start 主軸的起點對齊
2.flex-ecenternd 主軸的終點對齊
3.center 居中對齊
4.space-between 兩端對齊，每兩個專案之間的間隔相等（個人認為常用屬性值）
5.space-around 每個專案兩側的間隔距離是相等的（有坑，別踩，不是字面上的意思，如圖）
5、align-items 子元素在交叉軸上是如何排列對齊的（主要針對一行容器）
1.flex-start 交叉軸起點對齊（如圖）
2.flex-end 交叉軸終點對齊
3.center 交叉軸中間對齊
4.baseline 基線對齊，第一行文字的基線(下方)
5.stretch 預設值，如果專案未設定高度或高度為auto時，那麼將佔滿整個容器的高度
6、align-content 容器具備多跟軸線時(自動換行時)，專案的對齊方式
1.flex-start 專案在交叉軸起點對齊（和上面那個屬性差不多，不同的是前乙個是適用於只有一行容器，這個是適用於多行）
2.flex-end 專案在交叉軸終點對齊
3.center 專案在交叉軸中間對齊
4.space-between 與交叉軸兩端對齊,軸線之間的間隔相等
5.space-around 每個軸線兩端的間隔相等，軸線間間隔比軸線與父元素邊框間隔大一倍
6.stretch 預設值，在不指定專案高度時，佔滿整個交叉軸
專案（子元素）屬性
1.order 排序，定義專案的排列順序。值越小，越靠前
2.flex-grow 放大比例，如果當前排列軸有空餘空間，專案將如何放大
預設值為 0 ，不做任何放大處理（注意沒有負數）
只有乙個元素取值為1的元素，在有剩餘空間時，將佔滿剩餘的空間
有多個元素取值為1的時候，有剩餘空間時，大家平分剩餘空間
3.flex-shrink 專案的縮小比例，預設為1，即空間不足時，等比縮小（同上）
4.flex-basis 專案所佔據的空間大小
1.auto 預設值，專案本身大小
2.length，指定 寬 或 高(取決於主軸的方向)
5.align-self 單獨定義當前元素與其他元素不一樣的交叉軸對齊方式，可以覆蓋align-items的值。預設為 auto，即繼承父元素的align-items
1.auto 自動，繼承父元素align-items
2.flex-start 交叉軸起點
3.flex-end 交叉軸終點
4.center 交叉軸中間
5.baseline 基線對齊
6.stretch 在不指定專案高度時，佔滿整個交叉軸
彈性盒子（flexible box
將父元素盒子變為彈性盒子的方法 加display webkitt box 瀏覽器或設定為其他，box也可設定為inline box horizontal 設子元素為水平排列 預設 vertical 子元素為縱向排列start 子元素從開始位置對齊 大部分情況等同於左對齊 center 子元素居中對齊...
提高總結四 flexible box的布局練習
問題 justify items這幾個都沒有 1 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性 2 設為flex布局以後，子元素的float clear和vertical align屬性將失效。3 flex direction row row revers...
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...