在CSS布局中，實現垂直居中、相同高度的列等一直是令人頭疼的問題，但不管是什么布局，Flex往往都可以幾行命令搞定；93%的人現在正在運行的瀏覽器都已經支持Flexbox，這比支持HTML5 的<video>元素要好；所以現在我們一起來見證Flexbox的神奇，看看利用Flex如何實現骰子布局。

1.單項目

<div class="first-face">
    <span class="dot"></span>
  </div>

首先，只有左上角1個點的情況。Flex布局默認就是首行左對齊，所以一行代碼就夠了。

單項目1.png

 /*單項目1*/
.first-face {
  display: flex;
}

設置項目的對齊方式，就能實現居中對齊和右對齊。

單項目2.png

/*單項目2*/
.first-face {
  display: flex;
  justify-content: center;
}

單項目3.png

/*單項目3*/
.first-face {
  display: flex;
  justify-content: flex-end;
}

單項目4.png

/*單項目4*/
.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}

單項目5.png

/*單項目5*/
.first-face {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

單項目6.png

/*單項目6*/
.first-face {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

2.雙項目

<div class="second-face">
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

雙項目1.png

/*雙項目1*/
.second-face {
  display: flex;
  justify-content: space-between;
}

雙項目2.png

/*雙項目2*/
.second-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

雙項目3.png

/*雙項目3*/
.second-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

雙項目4.png

/*雙項目4*/
.second-face {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

雙項目5.png

/*雙項目5*/
.second-face {
  display: flex;
}
.second-face .dot:nth-of-type(2) {
  align-self: center;
}

雙項目6.png

/*雙項目6*/
.second-face {
  display: flex;
  justify-content: space-between;
}
.second-face .dot:nth-of-type(2) {
  align-self: flex-end;
}

3.三項目

<div class="third-face">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>

三項目.png

/*三項目*/
.third-face {
  display: flex;
}
.third-face .dot:nth-of-type(2) {
  align-self: center;
}
.third-face .dot:nth-of-type(3) {
  align-self: flex-end;
}

4.四項目

<div class="fourth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

四項目.png

/*四項目*/
.fourth-face {
  display: flex;
  justify-content: space-between;
}
.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

5.五項目

<div class="fifth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

五項目.png

/*五項目*/
.fifth-face {
  display: flex;
}
.fifth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fifth-face .column:nth-of-type(2) {
  align-self: center;
}

6.六項目

<div class="sixth-face">
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
    <div class="column">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </div>

六項目.png

/*六項目*/
.sixth-face {
  display: flex;
  justify-content: space-between;
}

大合照

骰子各面大合照.png

源代碼詳見 codepen.