參考文章：Flex 佈局教程：例項篇

一、骰子的佈局

• 骰子的一面，最多可以放置9個點。

下面，就來看看Flex如何實現，從1個點到9個點的佈局。

如果不加說明，本節的HTML模板一律如下。

<div class="box">
  <span class="item"></span>
</div>
複製程式碼

上面程式碼中，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;
}
複製程式碼