骰子布局1-6
html模板：把骰子面板當成一個容器，骰子中的每個點相當于每個項。
①一個點
html：
css：主軸和交叉軸都居中。
結果顯示：
②兩個點
html：
css：先是針對容器的屬性，彈性項目平均分布在該行上。
然后是針對容器中方的單個項目，第二個點和其他項目有不同的對齊方式，向尾對齊。
結果顯示：
③三個點和上面兩個點的寫法類似，不做多說明。
css：
結果顯示：
④四個點和六個點可以歸成同一類，即都是兩列，則需要在box里面添加div名為column屬性。
html：
css：看第二段，每列的排法，即flex-direction是每個項目的排列方向，column按列從上到下排列。justify-content：space-between項目彈性平均分布在該排列方向上。
結果顯示：
⑤五個點：分為三行，第一行兩個點；第二行一個點；第三行兩個點。同樣添加row屬性。
html：
css：排列方向按行排列，flex-wrap：wrap自動換行。項目彈性平均分布在該排列方向上。每排第二個item向尾對齊，第二排的item居中對齊。
結果顯示：
總結：
? ? ? ?Flex布局的實際使用需要容器屬性和項目屬性的結合使用。即既保證容器中所有項目相對整個容器的靈活性，也保證單個項目之間的靈活性。就是上面有提到的彈性。
? ? ? ?這是我在阮一峰大師網(wǎng)站中找的flex布局學習demo，自己完整寫下來，添加了自己的理解，還有加入了自己的一些方法，這個demo對flex的學習很有幫助，他里面還有語法篇。想要學習的小伙伴可以去網(wǎng)上搜“阮一峰flex”。
