骰子布局1-6
html模板：把骰子面板當(dāng)成一個容器夷都，骰子中的每個點(diǎn)相當(dāng)于每個項(xiàng)泽西。
①一個點(diǎn)
html：
css：主軸和交叉軸都居中佛纫。
結(jié)果顯示：
②兩個點(diǎn)
html：
css：先是針對容器的屬性缝彬，彈性項(xiàng)目平均分布在該行上萌焰。
然后是針對容器中方的單個項(xiàng)目，第二個點(diǎn)和其他項(xiàng)目有不同的對齊方式谷浅，向尾對齊扒俯。
結(jié)果顯示：
③三個點(diǎn)和上面兩個點(diǎn)的寫法類似奶卓，不做多說明。
css：
結(jié)果顯示：
④四個點(diǎn)和六個點(diǎn)可以歸成同一類撼玄，即都是兩列夺姑，則需要在box里面添加div名為column屬性。
html：
css：看第二段掌猛，每列的排法盏浙，即flex-direction是每個項(xiàng)目的排列方向，column按列從上到下排列荔茬。justify-content：space-between項(xiàng)目彈性平均分布在該排列方向上废膘。
結(jié)果顯示：
⑤五個點(diǎn)：分為三行，第一行兩個點(diǎn)慕蔚；第二行一個點(diǎn)丐黄；第三行兩個點(diǎn)。同樣添加row屬性孔飒。
html：
css：排列方向按行排列孵稽，flex-wrap：wrap自動換行。項(xiàng)目彈性平均分布在該排列方向上十偶。每排第二個item向尾對齊菩鲜，第二排的item居中對齊。
結(jié)果顯示：
總結(jié)：
? ? ? ?Flex布局的實(shí)際使用需要容器屬性和項(xiàng)目屬性的結(jié)合使用惦积。即既保證容器中所有項(xiàng)目相對整個容器的靈活性接校，也保證單個項(xiàng)目之間的靈活性。就是上面有提到的彈性狮崩。
? ? ? ?這是我在阮一峰大師網(wǎng)站中找的flex布局學(xué)習(xí)demo蛛勉，自己完整寫下來，添加了自己的理解睦柴，還有加入了自己的一些方法诽凌，這個demo對flex的學(xué)習(xí)很有幫助，他里面還有語法篇坦敌。想要學(xué)習(xí)的小伙伴可以去網(wǎng)上搜“阮一峰flex”侣诵。
