styles-app-flex-demo

骰子的布局

Flex进阶分享，搜集了超过六种实用案例
如果不加说明，本节的HTML模板一律如下。

<div class="box">
 <span class="item"></span>
</div>

上面代码中，div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex子项。如果有多个子项，就要添加多个span元素，以此类推。

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.box {
 display: flex;
}

Flex进阶分享，搜集了超过六种实用案例
设置项目的对齐方式，就能实现居中对齐和右对齐。

.box {
 display: flex;
 justify-content: center;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 justify-content: flex-end;
}

Flex进阶分享，搜集了超过六种实用案例
设置交叉轴对齐方式（垂直方向），可以垂直移动主轴。

.box {
 display: flex;
 align-items: center;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 justify-content: center;
 align-items: center;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 justify-content: center;
 align-items: flex-end;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
}

Flex进阶分享，搜集了超过六种实用案例
如果再增加一个点，可以完成下面的几种排列布局

.box {
 display: flex;
 justify-content: space-between;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: center;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: flex-end;
}

Flex进阶分享，搜集了超过六种实用案例

.box {
 display: flex;
}
.item:nth-child(2) {
 align-self: center;
}

Flex进阶分享，搜集了超过六种实用案例
align-self的作用在这里就很明显了

.box {
 display: flex;
 justify-content: space-between;
}
.item:nth-child(2) {
 align-self: flex-end;
}

Flex进阶分享，搜集了超过六种实用案例
align-self的作用在这里就很明显了

如果是三个点呢

.box {
 display: flex;
}
.item:nth-child(2) {
 align-self: center;
}
.item:nth-child(3) {
 align-self: flex-end;
}

Flex进阶分享，搜集了超过六种实用案例
那么四个点是不是也无所谓了

.box {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-content: space-between;
}

Flex进阶分享，搜集了超过六种实用案例
flex-wrap: wrap;

如果想看到四个点在四个角，需要修改下html布局

<div class="box">
 <div class="column">
 <span class="item"></span>
 <span class="item"></span>
 </div>
 <div class="column">
 <span class="item"></span>
 <span class="item"></span>
 </div>
</div>
.box {
 display: flex;
 flex-wrap: wrap;
 align-content: space-between;
}
.column {
 flex-basis: 100%;
 display: flex;
 justify-content: space-between;
}

Flex进阶分享，搜集了超过六种实用案例
实现5个点的布局

<div class="column">
 <span class="item"></span>
 <span class="item"></span>
</div>
<div class="column">
 <span class="item"></span>
</div>
<div class="column">
 <span class="item"></span>
 <span class="item"></span>
</div>
.box {
 display: flex;
 justify-content: space-between;
}
.column {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.column:nth-of-type(2) {
 justify-content: center;
}

Flex进阶分享，搜集了超过六种实用案例
接下来是6个点

.box {
 display: flex;
 flex-wrap: wrap;
 align-content: space-between;
}

Flex进阶分享，搜集了超过六种实用案例
或者是垂直方向

.box {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
 align-content: space-between;
}