青蛙小游戲?qū)W習(xí)flex布局
什么是flex布局？
flex布局又稱“彈性盒布局”，顧名思義元素就像有彈性一樣，會根據(jù)空間的大小彈性地分布，甚至?xí)裼袕椥砸粯痈淖冏陨淼膶挾然蚋叨取皵D”在同一容器中。
flex布局的組成
flex布局主要由2個內(nèi)容組成：父元素container，以及子元素items，items在container中實(shí)現(xiàn)flex布局。container items是大家約定俗稱的稱呼。
flex布局的重點(diǎn)代碼：
display:flex
flex-direction:row/column
flex-wrap:wrap;
justify-content:center/space-between
align-items:center
flex布局的注意點(diǎn)
1. 盡量不要給定固定的 width height，否則彈性布局會變得不那么彈性。
2. 使用min-width、max-width、min-height、max-height來限制寬度
3. flex布局和margin-xxx：auto 搭配使用有以外的效果。
container的樣式
1. 主軸的流動方向：flex-direction
- row：默認(rèn)值，從左到右
- column：從上到下。
- row-reverse：反row，即從右到左。
-
column-reverse：反column，即從上到下
flex-direction
2. 折行：flex-wrap
-
wrap：折行
wrap -
nowrap：不折行，默認(rèn)值。不折行的情況下，當(dāng)item總寬度大于container總寬度，item的寬度會被擠壓。
nowrap -
wrap-reverse：反向折行，非常反人類，不推薦使用。
wrap-reverse
3. items排列類型（要考慮主軸的方向）：justify-content
flex-start：默認(rèn)值，根據(jù)主軸方向，所有items往開始的方向（左、上）靠攏
flex-end：根據(jù)主軸方向，所有items往終點(diǎn)方向（右、下）靠攏
-
space-between：多余的空間放在中間。
space-between -
space-around：多余的空間以環(huán)繞items的模式排列。每個item兩邊都有同樣大小的間隔（item1的右邊的間隙是item1自己右邊的間隙+item2左邊的間隙）。
space-around -
space-evenly：多余的空間以環(huán)繞items的模式排列，但是整體間隙平均化（不是完全平均，但是可以先這么理解）。
space-evenly
4. 次軸方向（當(dāng)item高度不一的時候才會涉及到）：align-items（注意這個復(fù)數(shù)s）。次軸方向就是和主軸方向垂直的軸。
-
strech：所有item的長度或?qū)挾壤熘僚c最長或者最寬的item相同。前提是這些items都沒有固定的width或height，否則還是會以給定的width height為主，不會伸縮。
strech -
flex-start：根據(jù)次軸的方向，所有items往開始的方向（上、左）靠攏
flex-start -
flex-end：根據(jù)次軸的方向，所有items往開始的方向（下、右）靠攏
flex-end -
center：根據(jù)次軸方向，所有items居中對齊
center baseline：根據(jù)文字的基線對齊。基本不會使用。
5. 多行內(nèi)容排列：align-content
可能的值：space-between space-around flex-start flex-end center strech
6.flex-flow：縮寫樣式 將 flex-direction flex-wrap寫在一起，空格隔開。
items的樣式
flex-basis：默認(rèn)為auto，指定了 items 在主軸方向上的初始大小。一般不使用，而是用width、height代替。
-
order：默認(rèn)為0。order越大，item的排列順序就越往后。order相同的item根據(jù)html的順序排列。order可以是負(fù)數(shù)，也是越小越靠前。
order flex-grow：影響多余空間的分配，值越大分配的空間越多，分配比例：flex-grow/總flex-grow。默認(rèn)值為0，不分配任何多余的空間。
- flex-shrink：當(dāng)container空間全部被占滿且不足時，flex-shrink值越大的item將會被“擠壓”得越厲害。默認(rèn)值為1。
- align-self：屬性值和align-items的一樣，只是它只作用于一個item，而align-items作用于所有items。
- flex：flex-grow flex-shrink flex-basis 三個樣式的縮寫，空格隔開
