骰子布局Flex写法

骰子布局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布局的实际使用需要容器属性和项目属性的结合使用。即既保证容器中所有项目相对整个容器的灵活性，也保证单个项目之间的灵活性。就是上面有提到的弹性。

---

       这是我在阮一峰大师网站中找的flex布局学习demo，自己完整写下来，添加了自己的理解，还有加入了自己的一些方法，这个demo对flex的学习很有帮助，他里面还有语法篇。想要学习的小伙伴可以去网上搜“阮一峰flex”。