flex布局使用場景越來越多，flex布局的好處是比較容易上手，但瀏覽器相容性比較差，只能相容到ie9及以上。，裡邊的屬性也是很多，下面一一介紹
首先要在父元素上加上 display: flex; 相當於這塊就是乙個彈性盒子
"display: flex;width: 500px;height: 300px;border: 1px solid red;">
"div">
"div">
"div">
"div">
下邊來看看display: flex的一些常用屬性，以下屬性設定容器上。也就是父元素上
flex-direction屬性決定主軸的方向(預設不寫就是x正軸方向也就是起點在左端)它的值有以下幾個
flex-direction:row(預設值)主軸為水平方向，起點在左端
flex-direction:row-reverse 主軸為水平方向，起點在右端。
flex-direction:column 主軸為垂直方向，起點在上沿。
flex-direction:column-reverse 主軸為垂直方向，起點在下沿。
值的作用 column-reverse column row row-reverse分別對應下邊
flex-wrap屬性預設認情況下，專案都排在一條線（又稱」軸線」）上，flex-wrap屬性定義，如果一條軸線排不下，如何換行。不寫這個屬性，子元素會一直在軸線上 ，即使排不下，也不會換行
flex-wrap： nowrap（預設）：不換行。
flex-wrap： wrap：換行，第一行在上方。
flex-wrap：wrap-reverse：換行，第一行在下方。
nowrap（預設）
justify-content屬性定義了專案在主軸上的對齊方式。
justify-content： flex-start（預設值）：左對齊
justify-content： flex-end 右對齊
justify-content： center 居中
justify-content： space-between 兩端對齊，專案之間的間隔都相等。
justify-content：space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
基本上到這裡，就夠用的，更詳細更多屬性可以看這裡
flex布局詳解
2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 fl...
flex 布局詳解
布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著...
詳解Flex布局
彈性容器 包含著彈性專案的父元素。通過設定 display 屬性的值為 flex 或 inline flex 來定義彈性容器。彈性專案 flex item 彈性容器的每個子元素都稱為彈性專案。彈性容器直接包含的文字將被包復成匿名彈性 專案。也可以稱為子容器。軸 axis 每個彈性框布局包含兩個軸。彈...