1到6点，Flex布局精妙呈现骰子布局！

2023-01-12 02:12:46

掌握 Flex 布局：实现骰子布局

Flex 布局是一种强大的 CSS 布局方式，它使复杂的布局变得轻而易举。在本文中，我们将踏上一个激动人心的旅程，探索如何使用 Flex 布局实现从 1 点到 6 点的骰子布局。

认识骰子

骰子是一种古老的工具，用于通过掷出随机数字来决定胜负。其六个面分别标有 1 到 6 的数字。我们的目标是使用 Flex 布局重现这些布局。

从 1 点开始

一个点？太简单了！Flex 布局的 justify-content 和 align-items 属性允许我们轻松地将元素居中对齐。只需一个元素，一个点就完成了。

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

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

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

升级到 2 点

两个点？没问题！通过添加 flex-direction 属性，我们可以将元素水平排列，并在垂直方向上对齐。

<div class="dice">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
</div>

.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

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

.dot-1 {
  margin-right: 10px;
}

进阶到 3 点

三个点？小菜一碟！flex-wrap 属性允许我们自动换行，形成多行布局。

<div class="dice">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
  <div class="dot dot-3"></div>
</div>

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

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

.dot-1 {
  margin-right: 10px;
}

.dot-3 {
  margin-top: 10px;
}

挑战 4 点

四个点？我们有办法！order 属性允许我们重新排列元素的顺序，创造出有趣的布局。

<div class="dice">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
  <div class="dot dot-3"></div>
  <div class="dot dot-4"></div>
</div>

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

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

.dot-1 {
  margin-right: 10px;
}

.dot-3 {
  margin-top: 10px;
}

.dot-4 {
  order: -1;
}

5 点大爆发

五个点？没问题！我们可以使用 justify-content 和 align-items 属性来调整元素的对齐方式，创造出完美的五点布局。

<div class="dice">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
  <div class="dot dot-3"></div>
  <div class="dot dot-4"></div>
  <div class="dot dot-5"></div>
</div>

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

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

.dot-1 {
  margin-right: 10px;
}

.dot-3 {
  margin-top: 10px;
}

.dot-4 {
  order: -1;
}

.dot-5 {
  order: -2;
}

华丽的 6 点

六个点？我们的胜利宣言！通过再次微调元素的对齐方式，我们可以完成完美的六点布局，让你的对手惊叹不已。

<div class="dice">
  <div class="dot dot-1"></div>
  <div class="dot dot-2"></div>
  <div class="dot dot-3"></div>
  <div class="dot dot-4"></div>
  <div class="dot dot-5"></div>
  <div class="dot dot-6"></div>
</div>

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

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

.dot-1 {
  margin-right: 10px;
}

.dot-3 {
  margin-top: 10px;
}

.dot-4 {
  order: -1;
}

.dot-5 {
  order: -2;
}

.dot-6 {
  order: -3;
}