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