設為flex布局以後，子元素的float、clear和vertical-align屬性將失效
常用：display:flex;
justify-content: center; //橫向居中
align-items : center ； //縱向居中
一、flex-direction 容器內元素的排列方向(預設橫向排列)
1：flex-direction:row; 沿水平主軸讓元素從左向右排列
2：flex-direction:column; 讓元素沿垂直主軸從上到下垂直排列
3：flex-direction:row-reverse;沿水平主軸讓元素從右向左排列
二、flex-wrap 容器內元素的換行(預設不換行)
1：flex-wrap: nowrap; (預設)元素不換行,比如：乙個div寬度100%，設定此屬性，2個div寬度就自動變成各50%；
2：flex-wrap: wrap; 元素換行,比如：乙個div寬度100%，設定此屬性，第二個div就在第二行了；
三、justify-content 元素在主軸（頁面）上的排列
1：justify-content : center;元素在主軸（頁面）上居中排列
2：justify-content : flex-start;元素在主軸（頁面）上由左或者上開始排列
3：justify-content : flex-end;元素在主軸（頁面）上由右或者下開始排列
4：justify-content : space-between;元素在主軸（頁面）上左右兩端或者上下兩端開始排列
5：justify-content : space-around;每個元素兩側的間隔相等。所以，元素之間的間隔比元素與邊框的間隔大一倍。
四、align-items 元素在主軸（頁面）當前行的橫軸（縱軸）方向上的對齊方式
1：align-items : flex-start; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界（靠上對齊）
2：align-items : flex-end; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。（靠下對齊）
3：align-items : center; 彈性盒子元素在該行的側軸（縱軸）上居中放置。（居中對齊）
4：align-items : baseline; 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。（靠上對齊）
五、align-content 在彈性容器內的元素沒有占用交叉軸上所有可用的空間時對齊容器內的各項（垂直）
1：align-content: flex-start; 元素位於容器的開頭。各行向彈性盒容器的起始位置堆疊
2:align-content: flex-end; 元素位於容器的結尾。各行向彈性盒容器的結尾位置堆疊。
3:align-content: center ; 元素位於容器的中心。各行向彈性盒容器的中間位置堆疊。
4:align-content: stretch; 預設值。元素被拉伸以適應容器。各行將會伸展以占用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。
5:align-content: space-between;元素位於各行之間留有空白的容器內。各行在彈性盒容器中平均分布。
6:align-content: space-around;元素位於各行之前、之間、之後都留有空白的容器內。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。
display flex彈性布局
display flex 火狐支援無字首，谷歌和opera支援 webkit 字首寫法，比較適合移動端開發使用 例子 1 23header header a 注釋 display屬性設定flew，所有子元素都會自動變成伸縮專案，預設是橫向排列，若flew flow值設為column，變為縱向排列，f...
彈性布局（display flex）
一 flex 布局 flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，旨在提供乙個更有效地布局，對齊方式，並且能夠使容器中的子元素大小未知或動態變化情況下仍然能狗狗分配好子元素之間的空間。flex布局的主要思想是使父容器能夠調節子元素的高度 寬度 和排列順序 ...
彈性布局教程display flex
2009年，w3c提出了一種新的方案 flex布局，可以簡便 完整 響應式地實現各種頁面布局。以下是瀏覽器的支援情況 更多相容請參考 可以查詢到更多瀏覽器對html5的支援情況。flex是flexible box的縮寫，翻譯成中文就是 彈性盒子 用來為盒裝模型提供最大的靈活性。任何乙個容器都可以指定...