参考文章：
一、骰子的布局
- 骰子的一面，最多可以放置
9个点。
下面，就来看看Flex如何实现，从1个点到9个点的布局。
如果不加说明，本节的HTML模板一律如下：
Document 复制代码
上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。
1.1 单项目
- 首先，只有左上角
1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。
.box { display: flex;}复制代码 - 设置项目的对齐方式，就能实现居中对齐和右对齐。
.box { display: flex; justify-content: center;}复制代码 .box { display: flex; justify-content: flex-end;}复制代码 - 设置交叉轴对齐方式，可以垂直移动主轴。
.box { display: flex; align-items: center;}复制代码 .box { display: flex; justify-content: center; align-items: center;}复制代码 .box { display: flex; justify-content: center; align-items: flex-end;}复制代码 .box { display: flex; justify-content: flex-end; align-items: flex-end;}复制代码 1.2 双项目（先看容器布局，在此基础上移动项目布局）
justify-content
.box { display: flex; justify-content: space-between;}复制代码 flex-direction
.box { display: flex; flex-direction: column; justify-content: space-between;}复制代码 align-items
.box { display: flex; flex-direction: column; justify-content: space-between; align-items: center;}复制代码 .box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}复制代码 align-self
.box { display: flex;}.item:nth-child(2) { align-self: center;}复制代码 .box { display: flex; justify-content: space-between;}.item:nth-child(2) { align-self: flex-end;}复制代码 1.3 三项目
.box { display: flex;}.item:nth-child(2) { align-self: center;}.item:nth-child(3) { align-self: flex-end;}复制代码 二、项目flex属性
- 两个快捷值：
auto (1 1 auto)和none (0 0 auto)
（1）
.box { display: flex;}.item { flex: auto;}复制代码 （2）
.box { display: flex;}.item { flex: none;}复制代码 （3）
.box { display: flex;}.item { flex: 1; // 1 1 0%}复制代码 （4）
.box { display: flex;}.item { flex: 1;}.item:nth-child(1){ flex: 0 0 100%;}.item:nth-child(2){ flex: 0 0 50%;}复制代码