一路繁花似锦绣前程
失败的越多,成功才越有价值

导航

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>css弹性盒骰子</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      background: #ff0;
      float: left;
      display: flex;
      box-sizing: border-box;
    }

    span {
      display: block;
      width: 50px;
      height: 50px;
      background: #f00;
      border-radius: 50%;
    }

    div:nth-of-type(1) {
      justify-content: center;
      align-items: center;
    }

    div:nth-of-type(2) {
      justify-content: space-around;
      align-items: center;
    }

    div:nth-of-type(3) {
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    div:nth-of-type(3) > span:nth-of-type(1) {
      align-self: flex-start;
    }

    div:nth-of-type(3) > span:nth-of-type(3) {
      align-self: flex-end;
    }

    div:nth-of-type(4) {
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    nav {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;
    }

    div:nth-of-type(5) {
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }

    div:nth-of-type(6) {
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
  </style>
</head>
<body>
<div>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
</div>
<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<div>
  <nav>
    <span></span>
    <span></span>
  </nav>
  <nav>
    <span></span>
    <span></span>
  </nav>
</div>
<div>
  <nav>
    <span></span>
    <span></span>
  </nav>
  <nav>
    <span></span>
  </nav>
  <nav>
    <span></span>
    <span></span>
  </nav>
</div>
<div>
  <nav>
    <span></span>
    <span></span>
  </nav>
  <nav>
    <span></span>
    <span></span>
  </nav>
  <nav>
    <span></span>
    <span></span>
  </nav>
</div>
</body>
</html>

 

posted on 2021-01-15 15:15  一路繁花似锦绣前程  阅读(171)  评论(0编辑  收藏  举报