教育改变生活

标题: 【HTML5：第十章 CSS布局：弹性盒子布局】典型案例-骰子 [打印本页]

作者: 却尘 时间: 2022-1-12 11:01
标题: 【HTML5：第十章 CSS布局：弹性盒子布局】典型案例-骰子
本帖最后由却尘于 2022-1-12 11:04 编辑

<!DOCTYPE html>
<html>
      <head>
            <meta  charset="tf-8" />
            <title>骰子</title>
            <style type="text/css">
                     body{
                              display: flex;
                              flex-flow: wrap;
                     }
                     .item{
                              background-color: #000;
                              border-radius: 50%;
                              width: 20px;
                              height: 20px;
                     }
                     .flex {
                        padding: 5px;
                        margin: 10px;
                        display: flex;
                        width: 100px;
                        height: 100px;
                        border: 1px solid #000;
                        border-radius: 5px;
                     }
                     .flex-1 {
                        justify-content: center;
                        align-items: center;
                     }
                     .flex-2 {
                        flex-direction: column;
                        justify-content: space-around;
                        align-items: center;
                     }
                     .flex-3 {
                        justify-content: space-around;
                     }
                     .flex-3 .item:nth-of-type(2){
                        align-self: center;
                     }
                     .flex-3 .item:nth-of-type(3){
                        align-self:flex-end;
                     }
                     .flex-4 {
                        flex-wrap: wrap;
                        align-content: space-between;
                     }
                     .flex-4 .column{
                        display: flex;
                        flex-basis: 100%;
                        justify-content: space-between;
                     }
                     .flex-5 {
                        flex-wrap: wrap;
                        align-content: space-between;
                     }
                     .flex-5 .column{
                              display: flex;
                              flex-basis: 100%;
                              justify-content: space-between;
                     }
                     .flex-5 .column:nth-of-type(2){
                              justify-content: center;
                     }
                     .flex-6 {
                        flex-wrap: wrap;
                        align-content: space-around;
                     }
                     .flex-6 .column{
                              display: flex;
                              flex-basis: 100%;
                              justify-content: space-around;
                     }
            </style>
      </head>
<body>
      <div class="flex flex-1">
      <div class="item"></div>
      </div>
      <div class="flex flex-2">
      <div class="item"></div>
      <div class="item"></div>
      </div>
      <div class="flex flex-3">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      </div>
      <div class="flex flex-4">
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
      </div>
      <div class="flex flex-5">
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
            <div class="column">
                     <div class="item"></div>
            </div>
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
      </div>
      <div class="flex flex-6">
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
            <div class="column">
                     <div class="item"></div>
                     <div class="item"></div>
            </div>
      </div>
</body>
</html>

欢迎光临教育改变生活 (http://bbs.goldoar.com/)