佈局神器flex

flex

Flex 是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性

用法

設置在父元素上的屬性

1. flex-direction ---決定項目的排列方向，row | row-reverse | column | column-reverse
2. flex-wrap ---決定項目是否換行，nowrap | wrap | wrap-revers
3. flex-flow ---<flex-direction> || <flex-wrap>
4. justify-content ---決定項目排列方向上的對齊方式，
   1) flex-start
   2) flex-end
   3) center
   4) space-between 兩端對齊
   5) space-around 子容器沿主軸均勻分佈，位於首尾兩端的子容器到父容器的距離是子容器間距的一半。
5. align-items ---決定垂直軸上的對齊方式，flex-start | flex-end | center | baseline | stretch

有坑，記得父元素高度

1. align-content ---決定多列或多行垂直軸上的對齊方式，flex-start | flex-end | center | space-between | space-around | stretch

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap

設置在子元素上的屬性

1. order ---決定項目的排列順序，數值越小，排列越靠前，默認爲0，<integer>
2. align-self ---決定單個項目與其餘項目不同的對齊方式，可覆蓋align-items屬性，默認值爲auto，auto | flex-start | flex-end | center | baseline | stretch
3. flex ---none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

4. flex-grow ---決定項目的放大比例，默認爲0，<number>

   按比例分配剩餘空間

5. flex-shrink ---決定項目的縮小比例，默認爲1，<number>

   當空間不足時，按比例縮放

6. flex-basis ---決定在分配多餘空間以前，項目佔據的空間，默認值爲auto，<length> | auto

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto

1.屬性定義了在分配多餘空間以前，項目佔據的主軸空間。默認值爲auto，即爲項目原本大小；
2.優先級比width高;
3.元素存在min-width/max-width限制

多行多列布局

flex+width%

.box {
   display: flex;
   flex-wrap: wrap;
 }
.item {
    width: 20%;
 }

多行佈局最後一行左對齊

1.添加幾個與元素等寬的元素

<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="empty"></div>
    <div class="empty"></div>
    <div class="empty"></div>
  </div>

2.after

.box:after {
    content: "";
    flex: auto;
 }

.box:after {
    content: "";
    flex: 0 1 50%;
 }

參考連接：
一勞永逸的搞定 flex 佈局
寫給本身看的display: flex佈局教程
讓CSS flex佈局最後一行列表左對齊的N種方法