flex布局骰子案例

此案例基于 flex 语法简单实现骰(tou)子1到6点，希望对于了解 flex会有帮助

和 flex 语法篇一起看效果更佳，点击前往

想要实现骰子1到6点，可以想到我们需要一个骰子模型和一个点模型

骰子模型：

.container {
        display: flex;
        padding: 10px;
        width: 150px;
        height: 150px;
        border: 3px solid #ddd;
        border-radius: 10px;
        background: #fff;
        box-shadow: 3px 3px 3px 0px #999;
        margin: 50px;
        }
<!-- 上面样式，下面盒子，复制请注意，下同-->

         <!-- 骰子模型 -->
        <div class="container one">
        </div>

点模型：

 .item {
            width: 50px;
            height: 50px;
            background: #999;
            border-radius: 50%;
            /*可以绘制成一个圆形*/
            box-shadow: 1px 1px 2px 0px #999;
        }
// ---------------------------------------
        <!-- 点模型 -->

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

一点:

顺便打一遍广告，这都是我(〃‘▽’〃)

.one {
            justify-content: center;
            align-items: center;
        }
// ------------------------------------------------
<!-- 一点 -->
        <div class="container one">
            <div>
                <div class="item"></div>
            </div>
        </div>

二点:

.two {
            justify-content: space-between;
            align-items: center;
        }
// ------------------------------------------------
//二点
<div class="container two">
            <div>
                <div class="item"></div>

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

            </div>
        </div>

三点:

.three {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

.three div:first-child {
            align-self: flex-start;
        }

.three div:last-child {
            align-self: flex-end;
        }
// ----------------------------------------------
// 三点
<div class="container three">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>

四点:

.four {
            /* flex-direction: column; */
            justify-content: space-around;
        }

.four .item {
            margin: 15px;
        }

.four div {
            align-items: space-between;

        }
// ---------------------------------------------
// 四点
<div class="container four">
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>

五点和六点:

五点和六点只有中间一点不同，完全可以放在一起，所以我让他们在一起了(*￣︶￣)

.five,.six {
            flex-direction: column;
            flex-flow: wrap;
            justify-content: space-around;
        }

.five .item,.six .item {
            margin-right: 10px;
            margin-left: 10px;
            display: inline-block;
        }
// ------------------------------------------
 <!-- 五点 -->
        <div class="container five">
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
<!-- 六点 -->
        <div class="container six">
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>

十点:

这个当然不是骰子，毕竟骰子6点只是个演示案例，要知道还有无限可能！

.ten {
        width: 300px;
        height: 150px;
        }

.ten .item {
        margin: 7px;
        margin-top: 15px;
        margin-bottom: 15px;
        }

.ten {
        justify-content: space-around;
        align-items: center;
        }
// -----------------------------------
 <!-- 十点 -->
        <div class="container ten">
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>

更多可能当你发现---->> 点击发现