Flex布局—实战演练

2023-09-17 16:17:21

灵活布局Flex布局——实战演练

实操实例演示

在一块骰子的面儿上，最多可以放置9个点儿，以下就让我们瞧瞧 Flex 如何实现，从1个点儿到9个点的布局。

在此不加说明，本节所采用的 HTML 模板一律如下：

<div id="wrap">
  <div class="item"></div>
</div>

以上代码中，div 元素（代表骰子的一个面儿）是 Flex 布局的容器，而 class="item" 的元素则是容器当中的项目（即，骰子面上的点儿）。

1. 一个点

最简单的莫过于，在骰子的一个面儿上，仅放置一个点儿。HTML 代码如下：

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

而它的 CSS 代码则如下：

#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
}

如需将点儿居中放置在骰子的面儿上，可以运用 Flex 属性 justify-content: center; 和 align-items: center;。

2. 两个点儿

假如想在骰子的一个面儿上，同时放置两个点儿，我们同样需要用上 Flex 属性 justify-content: center; 和 align-items: center;，只不过要再引入 Flex 属性 flex-direction: row;，使得项目水平排列：

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

#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.item {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  margin: 0 5px;
}

3. 三个点儿

若想在骰子的一个面儿上，放置三个点儿，可以灵活运用 Flex 布局中的对齐属性：

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

#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.item {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  margin: 0 5px;
}

4. 其余点儿

同理，在骰子的一个面儿上，放置 4 个、5 个、6 个、7 个、8 个、9 个点儿，也都是大同小异，只需在 HTML 当中，增加对应数量的 div 元素即可。

例如，放置 4 个点儿，HTML 代码如下：

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

而 CSS 代码则如下：

#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.item {
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  margin: 0 5px;
}