面试官：「骰子布局」

前言

这里介绍的是使用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>