弹性盒模型（详解）
摘要
關于彈性盒模型，屬性也是比較多，屬性的值也是比較雜，所以看起來也是比較吃力，總是學習的時候似乎已經掌握了，慢慢不用的話一些屬性又不會了。
這一篇文章，只去理解彈性盒模型的屬性，而不會列出所有屬性的值。
重點在于理解，而非去死記硬背。
1.創建彈性盒子
所有人應該都知道我們應該使用display:flex來創建一個彈性盒子。
但是其實還有另一種創建方式：display:inline-flex。
乍一看這個屬性和display:block , display:inline-block是不是有一點點像。
其實效果也是一樣的，就是創建出來的盒子是顯示為塊級元素還是行內塊元素。
效果是這樣子的：
<style>.box{display: inline-flex;height: 100px;border: 1px solid black;}p{width: 100px;height: 50px;background-color: blue;margin-right: 10px;} </style> <body><div class="box"><p></p><p></p><p></p><p></p><p></p></div> </body>這里不理解可以參考一下塊級元素和行級元素的區別。
2.排列方向（flex-direction）
可以看到，我們上面的盒子設置成了彈性盒子之后，即便盒子內部的元素是塊級元素，它們也依舊在按順序排列著。
也就是，在彈性盒子里面，不管什么元素，元素具有什么樣子的特性，都得乖乖的按順序排列。所以這里就有一個問題，這些元素的排列方式，可不可以由我們來修改呢？
例如我的盒子里面是想著么排列的。
或者我的盒子是想著么排列的。
那肯定是可以的，這里面我們只需要給彈性盒子設置flex-direction這個屬性就可以了
這里面不列舉這個屬性的值，感興趣可以自己嘗試一下。
3.換行（flex-wrap）
對于上面的情況，我們設想一個場景，如果彈性盒子我們設置了width，對于里面的每一個元素也設置了width。
如果按著順序一直排列，但是盒子的寬度不夠了會出現什么情況，里面的元素會冒出去嗎？還是會自動的去換行？
答案是，盒子會擠壓里面的所有元素讓元素不要超出父元素。
但是如果我們給彈性盒子添加了換行的屬性flex-wrap后，里面的元素就會自動換行了。
而具體你想換行在上方還是在下方，這里的屬性可以自己嘗試，就不列舉了。
4.調整主軸內容（justify-content）
對于一個已經設置了flex-direction的彈性盒子，我們的效果是這個樣子的：
他在排列方向上靠左顯示。
但如果我想要的效果是這個樣子的：
或者是這幾個樣子的：
當然也是可以實現的！justify-content這個屬性就是用來設置主軸上元素的位置的。
而這個屬性的值也是可以實現比上面還多的效果。
5.調整垂直軸內容（align-items）
如果我們把彈性盒子的高度設置的大一點，我們顯示的效果是這個樣子的：
那如果我想以這幾種方式來顯示呢？
我們就可以通過align-items這個屬性做到，而這個屬性就是用來決定垂直軸（和主軸方向垂直的軸）的元素位置。
6.調整垂直內容（align-content）
現在我們想一個問題，align-items和justify-content這兩個屬性除了作用的軸不同外，效果是不是一樣的？
其實仔細想一下，他們兩個的效果是不一樣的，前者只是決定了垂直軸上的排列的開始位置。
而不能像后者那樣能決定出再主軸方向的排列的效果。
所以在垂直軸上有一個屬性和justify-content的效果是一樣的：align-content
有了這個屬性之后，你可以讓你的元素這么排列：
也可以這樣：
還可以這樣：
所以在這里我們要區分align-items和align-content這兩個屬性
7.彈性元素
上面說的所有屬性，都是針對于彈性盒子，也可以說是針對于彈性盒子中的所有元素，不管什么屬性大家一起適應。
如果我們想針對于某個彈性元素，給它一些特權，這個也是可以操作的，這里面我用表格來對這三個屬性進行展示。
記住，這幾個屬性不是寫在彈性盒子里的css了。是寫在某個彈性元素的css屬性里面
| flex-grow | 當盒子有多余的空間時 ，當前元素相對于其他同輩元素增大的比例 | 0 |
| flex-shrink | 當盒子空間不夠時，當前元素相對于其他同輩元素縮減的比例 | 1 |
| flex-basis | 可以設置彈性元素的元素框尺寸 | auto |
總結
- 上一篇： Excel插件E灵：按家庭建表，创建一户
- 下一篇： Laravel集成Maatwebsite