骰子布局完美收关：跟着实战，拒绝迷茫

2023-09-03 23:29:21

掌握 Flex 布局技巧，让你的前端开发更轻松！

在当今快节奏的前端开发世界中，掌握最新的布局技术至关重要，而 Flex 布局正是其中一项不可或缺的技能。Flex 布局是一种一维布局模型，它可以轻松地将元素排列成一行或一列。无论你是初学者还是经验丰富的开发者，学习 Flex 布局技巧都将极大地提升你的开发效率和面试竞争力。

骰子布局：Flex 布局实战

为了更好地理解 Flex 布局的实际应用，让我们以一个骰子布局为例。骰子布局要求将六个点排列成一个方块，类似于标准的六面骰子。

HTML 结构：

<div class="dice">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

CSS 样式：

.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
}

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

布局实现：

display: flex; 将骰子容器设置为 Flex 布局。
flex-direction: row; 将元素排列成一行。
justify-content: center; 将元素水平居中。
align-items: center; 将元素垂直居中。

点数显示：

为了显示骰子的点数，我们可以使用伪元素。伪元素是 HTML 和 CSS 中的特殊元素，它们不存在于 DOM 树中，但可以通过 CSS 进行选择和设置样式。

.dice::before {
  content: "1";
  font-size: 20px;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

::before 选择骰子容器前的伪元素。
content: "1"; 设置伪元素的内容为 "1"。
font-size: 20px; 设置伪元素的字体大小。
color: white; 设置伪元素的颜色。
position: absolute; 将伪元素设置为绝对定位。
top: 50%; 将伪元素垂直居中。
left: 50%; 将伪元素水平居中。
transform: translate(-50%, -50%); 将伪元素向左和向上平移 50%。