flex佈局使用場景越來越多，flex佈局的好處是比較容易上手，但瀏覽器兼容性比較差，只能兼容到ie9及以上。，裏邊的屬性也是很多，下面一一介紹
首先要在父元素上加上 display: flex; 相當於這塊就是一個彈性盒子
<style type="text/css">
.div{
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<body>
<div style="display: flex;width: 500px;height: 300px;border: 1px solid red;">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
</body>
當你只給父元素設置display: flex時 他的子元素默認是向X正軸排序的
下邊來看看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（默認）
wrap
wrap-reverse
| justify-content屬性定義了項目在主軸上的對齊方式。 |
|---|
| justify-content： flex-start（默認值）：左對齊 |
| justify-content： flex-end 右對齊 |
| justify-content： center 居中 |
| justify-content： space-between 兩端對齊，項目之間的間隔都相等。 |
| justify-content：space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。 |
基本上到這裏，就夠用的，更詳細更多屬性可以看這裏https://www.runoob.com/w3cnote/flex-grammar.html