面试官：「骰子布局」

前言

这里介绍的是使用flex布局方式实现骰子中的1点到6点的布局。

🎲 如何实现骰子中的1点布局？

  <div class="contaner layout">
    <div></div>
  </div>

  <style>
    .contaner {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

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

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

🎲 如何实现骰子中的2点布局？

  <div class="contaner layout">
    <div></div>
    <div></div>
  </div>

  <style>
    .contaner {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

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

    .layout {
      display: flex;
      justify-content: space-around;
    }

    div:last-child {
      align-self: flex-end;
    }
  </style>

🎲 如何实现骰子中的3点布局？

  <div class="contaner layout">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <style>
    .contaner {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

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

    .layout {
      display: flex;
      justify-content: space-around;
    }

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

    div:last-child {
      align-self: flex-end;
    }
  </style>

🎲 如何实现骰子中的4点布局？

  <div class="contaner layout">
    <div>
      <p></p>
      <p></p>
    </div>
    <div>
      <p></p>
      <p></p>
    </div>
  </div>

  <style>
    .contaner {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

    .contaner>div>p {
      width: 10px;
      height: 10px;
      background-color: black;
      border-radius: 50%;
    }

    .layout {
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-around;
    }

    .layout>div {
      display: flex;
      justify-content: space-around;
    }
  </style>

🎲 如何实现骰子中的5点布局？

  <div class="contaner layout">
    <div>
      <p></p>
      <p></p>
    </div>
    <div>
      <p></p>
    </div>
    <div>
      <p></p>
      <p></p>
    </div>
  </div>

  <style>
    .contaner {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

    .contaner>div>p {
      width: 10px;
      height: 10px;
      background-color: black;
      border-radius: 50%;
    }

    .layout {
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-around;
    }

    .layout>div {
      display: flex;
      justify-content: space-around;
    }
  </style>

🎲 如何实现骰子中的6点布局？

  <div class="contaner layout">
    <div>
      <p></p>
      <p></p>
    </div>
    <div>
      <p></p>
      <p></p>
    </div>
    <div>
      <p></p>
      <p></p>
    </div>
  </div>

  <style>
    .contaner {
      width: 100px;
      height: 100px;
      border: 1px solid #999;
    }

    .contaner>div>p {
      width: 10px;
      height: 10px;
      background-color: black;
      border-radius: 50%;
    }

    .layout {
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-around;
    }

    .layout>div {
      display: flex;
      justify-content: space-around;
    }
  </style>