flex布局-骰子实战篇

前言

flex布局可以说是网页当前的主流布局之一。在此之前需要了解flex布局的基本语法：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

开始布局

骰子布局

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

.flex {
  display: flex;
}

.dice {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  border-radius: 4px;
}

.dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #000;
}

1点

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

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

2点

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

.dice {
  justify-content: space-between;
}

.dot:nth-child(2) {
  align-self: flex-end;
}

3点

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

.dice {
  justify-content: space-between;
}

.dot:nth-child(2) {
  align-self: center;
}

.dot:nth-child(3) {
  align-self: flex-end;
}

4点

<div class="dice flex">
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.dice {
  justify-content: space-between;
}

.dot-box {
  flex-direction: column;
  justify-content: space-between;
}

5点

<div class="dice flex">
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dot-box flex">
    <div class="dot"></div>
  </div>
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.dice {
  justify-content: space-between;
}

.dot-box {
  flex-direction: column;
  justify-content: space-between;
}

.dot-box:nth-child(2) {
  align-self: center;
}

6点

<div class="dice flex">
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
  <div class="dot-box flex">
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

.dice {
  flex-direction: column;
  justify-content: space-between;
}

.dot-box {
  justify-content: space-between;
}