css-flex实现六面骰子

1. html结构

<div class="dice-box">
	<div class="dice first-face">
		<span class="dot"></span>
	</div>
	<div class="dice second-face">
		<span class="dot"></span>
		<span class="dot"></span>
	</div>
	<div class="dice third-face">
		<span class="dot"></span>
		<span class="dot"></span>
		<span class="dot"></span>
	</div>
	<div class="dice fourth-face">
		<div class="column">
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
		<div class="column">
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
	</div>
	<div class="fifth-face dice">
		<div class="column">
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
		<div class="column">
			<span class="dot"></span>
		</div>
		<div class="column">
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
	</div>
	<div class="dice sixth-face">
		<div class="column">
			<span class="dot"></span>
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
		<div class="column">
			<span class="dot"></span>
			<span class="dot"></span>
			<span class="dot"></span>
		</div>
	</div>
</div>

2. 整体css

.dice {
	width: 200px;
	height: 200px;
	padding: 20px;
	background-color: tomato;
	border-radius: 10%;
}

.dot {
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: white;
}

3. 第一面

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

4. 第二面

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

5. 第三面

.third-face {
	display: flex;
	justify-content: space-between;
}
.third-face .dot:nth-of-type(2) {
	align-self: center;
}
.third-face .dot:nth-of-type(3) {
	align-self: flex-end;
}

6. 第四面

注意这里的HTML结构要分成两列

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

7. 第五面

这里要分成三列

.fifth-face {
	display: flex;
	justify-content: space-between;
}
.fifth-face .column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
	align-self: center;
}

8. 第六面

和第四面是一模一样的，多了两个点而已。

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