【CSS3】flex布局实践篇 | 骰子

前言

flex布局的出现解决了CSS长期以来缺乏的布局机制。

本期我们就来使用flex布局实现骰（tóu）子的制作。

骰子是什么？

骰子一般指色子。它有6个面，六面分别可有1，2，3，4，5，6点。

就像下图所示

知道骰子是什么样了，我们就开始制作它的6个面吧~

骰子的布局

接下来，我们就来看看，使用flex如何实现1到6个点的布局吧！

从上图我们可以知道flex布局的实现思想。

HTML结构

<div class="first-face">
  <div class="pip"></div>
</div>

class名为first-face的元素(骰子的面)代表flex容器，class名为pip的元素（骰子的点）代表flex项目。

我们从上图可以上出骰子面和点都有点立体的感觉，我们先把骰子面和点的样式实现出来。

骰子的面

[class$="face"] {
    width: 104px;
    height: 104px;
    border-radius: 10px;
    padding: 4px;
    
    background-color: #e7e7e7;
    
    /* 实现立体效果的重要代码-内阴影 */
    box-shadow: 
      inset 0 5px #fff,
      inset 0 -5px #bbb,
      inset 5px 0 #d7d7d7,
      inset -5px 0 #d7d7d7;
}

这里我们简单解读下内阴影这段代码：

box-shadow 属性向框添加一个或多个阴影。

• inset 0 5px #fff 添加上阴影
• inset 0 -5px #bbb 添加下阴影
• inset 5px 0 #d7d7d7 添加左阴影
• inset -5px 0 #d7d7d7 添加右阴影

骰子的点

.pip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 4px;

  background-color: #333;

  box-shadow: inset 0 3px #111, inset 0 -3px #555;
}

第一面-1点

HTML结构

<div class="first-face">
  <div class="pip"></div>
</div>

CSS

左上角一个点，flex布局默认就是首行左对齐。

.first-face {
    display: flex;
}

设置项目的对齐方式，就能实现居中对齐和右对齐。

.first-face {
    display: flex;
    justify-content: center;
}

.first-face {
    display: flex;
    justify-content: flex-end;
}

设置交叉轴的对齐方式，可以在垂直方向上移动点位

.first-face {
    display: flex;
    align-items: center;
}

.first-face {
    display: flex;
    align-items: flex-end;
}

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

这个就是我们想要的第一面的点数了。

.first-face {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.first-face {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.first-face {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

第二面-2点

HTML结构

<div class="second-face">
  <div class="pip"></div>
  <div class="pip"></div>
</div>

.second-face {
    display: flex;
    justify-content: space-between;
}

.second-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.second-face {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.second-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.second-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

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

第三面-3点

HTML结构

<div class="third-face">
  <div class="pip"></div>
  <div class="pip"></div>
  <div class="pip"></div>
</div>

CSS

.third-face {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

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

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

第四面-4点

html结构

<div class="first-face">
  <div class="col">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="col">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</div>

css

.four-face {
  display: flex;
  justify-content: space-between;
}

.four-face .col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

第五面-5点

html结构

<div class="fifth-face">
  <div class="col">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="col">
    <div class="pip"></div>
  </div>
  <div class="col">
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</div>

css

.fifth-face {
  display: flex;
  justify-content: space-between;
}
.fifth-face .col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .col:nth-child(2) {
  align-self: center;
}

第六面-6点

HTML结构

<div class="six-face">
  <div class="col">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
  <div class="col">
    <div class="pip"></div>
    <div class="pip"></div>
    <div class="pip"></div>
  </div>
</div>

css

.six-face {
  display: flex;
  justify-content: space-between;
}
.six-face .col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

结语

flex布局真的真的太香了，但一些浏览器不完全支持 Flexbox 布局的最新语法，所以，很遗憾，一些兼容性工作是需要的。

但在此我们就不做讨论了。有兴趣的同学可以研究一下。

在线demo

以上内容参考了以下文章：

• Getting Dicey With Flexbox
• # Flex 布局教程：实例篇