弹性布局做骰子布局

使用弹性布局完成骰子 一点 到 九点 的布局；（七点和八点没写）

先做出基本样式：

 <style>

        /* 全局样式 */
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        /* body背景颜色，让整个骰子居中显示 */
        body {
            background-color: #2b2b2b;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        /* 骰子样式 */
        .box {
            width: 210px;
            height: 210px;
            background-color: #e7e7e7;
            border-radius: 5px;

            /* 骰子内阴影 */
            box-shadow: inset 6px 6px 2px rgba(0, 0, 0, 0.2),
            inset -6px -6px 2px rgba(0,0,0,0.2);
        }

        /* 骰子上的点的样式 */
        .item{
            width: 50px;
            height: 50px;
            background-color: #333;
            border-radius: 50%;
            margin: 10px;
        }
    </style>

---

一点布局

   <div class="box">
        <div class="item"></div>
    </div>

1.左上角：display默认纵向排列，所以只需要一行代码

css：

 .box {
            /* 在左上角显示，只需要一个 display: flex; */
            display: flex;
    }

 2.在上方中间显示

css：

 .box {
        display: flex;
        /* 在上方中间显示 */
       justify-content: center;
    }

 3.在右上角显示

css：

.box {
            display: flex;
            /* 在右上角显示 */
            justify-content: flex-end;
}

 4.在中间左边显示

css：

.box {
            display: flex;
            /* 在中间左边显示 */
            align-items: center;
    }

5.居中显示

css：

 .box {
            display: flex;
            /* 居中显示 */
            align-items: center;
            justify-content: center;
    }

 6.中间右边

css：

 .box {
            display: flex;
            /* 中间居右 */
            align-items: center;
            justify-content: end;
    }

 7.底部居左

css：

.box {
            display: flex;
            /* 左下角 */
            align-items: flex-end;
    }

 8.底部居中

css：

 .box {
            display: flex;
            /* 中下角 */
            justify-content: center;
            align-items: flex-end;
    }

 9.底部居右

css：

 .box {
            display: flex;
            /* 右下角 */
            justify-content: flex-end;
            align-items: flex-end;
    }

---

 两点布局

<div class="box">
            <div class="item"></div>
            <div class="item"></div>
    </div>

1.居左显示

css：

  .box {
            display: flex;
            /* 居左 */
            flex-direction: column;
            justify-content: space-between;
    }

2.居中显示

css：

 .box {
            display: flex;
            /* 居中 */
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
    }

 3.居右显示

css：

 .box {
            display: flex;
            /* 居右 */
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
    }

 4.垂直居中显示

css：

  .box {
          display: flex;
          justify-content: space-between;
            align-items: center;
    }

 5.斜着显示

css：

 .box {
            display: flex;
            /* 斜体 第一步*/
            justify-content: space-between;
    }
 /* 斜体第二步 */
 .item:nth-child(2){
            align-self: flex-end;
     }

---

三点样式

 <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

斜着显示

css：

先在父级给上弹性属性

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

单独设置第二个小点：

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

设置第三个小点:

 .item:nth-child(3){
            align-self: flex-end;
        }

三点的其他布局样式没有难度，就不一一举例了

---

四点布局

<div class="box">
        <div class="cloumn">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="cloumn">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

 先在最外层设置

 .box {
            display: flex;
            justify-content: space-between;
    }

 设置二级盒子：

 .cloumn{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

---

 五点布局

<div class="box">
        <div class="cloumn">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="cloumn">
            <div class="item"></div>
        </div>
        <div class="cloumn">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

除了中间的点，其他四个点和四点是一样的

 .box {
            display: flex;
            justify-content: space-between;
    }
.cloumn{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
  /* 在单独设置中间这个点 */
        .cloumn:nth-child(2){
            align-self: center;
        }

---

六点布局

<div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

1.竖向排列，六个点分为两行，这里就运用到 align-content: space-between; 了，

操作两行进行排列

 .box {
            display: flex;
            /* 纵向排列 */
            flex-direction: column;
            flex-wrap: wrap;
            align-content: space-between;
    }

 2.横向排列，也是一个道理

 .box {
            display: flex;
            /* 横向排列 */
            flex-wrap: wrap;
            align-content: space-between;
    }

---

 九点布局

<div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

个人认为九点布局很简单，每个点都有固定的宽高，那么只要在大盒子里给九个小盒子，在给个换行就行了

 .box {
            display: flex;
            flex-wrap: wrap;
    }