Flex布局之骰子实例

实例一 一点至四点骰子

实现效果如下：

html代码

<div class="dice">
    <div class="row1">
        <div class="one-face">
            <span class="pot"></span>
        </div>

        <div class="three-face">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>

    <div class="row2">
        <div class="two-face">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="four-face">
            <div class="column">
                <span class="pot"></span>
                <span class="pot"></span>
            </div>
            <div class="column">
                <span class="pot"></span>
                <span class="pot"></span>
            </div>
        </div>
    </div>
</div>

css样式代码

<style>
    body{
        background-color: black;               
    }
    .dice{
        display:flex;
        justify-content: center;
        align-items: center;
    }
    [class $='face']{
        margin:16px;/*设置所有外边距属性*/
        padding:4px;/*设置所有填充属性*/
        background-color: lightgray;
        width: 120px;
        height:120px;
        -o-object-fit: contain;
        object-fit: contain;/*指定元素的内容应该如何去适应指定容器的高度与宽度。contain-保持原有尺寸比例。内容被缩放。*/
        -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
        /*inset-从外层的阴影（开始时）改变阴影内侧阴影;5px-阴影大小;0-模糊距离*/
        box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
        border-radius: 10%;                 
    }
    .pot{
        display: block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin: 4px;
        background-color: #333;
        -webkit-box-shadow: inset 0 3px #111,inset 0 -3px #555;
        box-shadow: inset 0 3px #111,inset 0 -3px #555;
    }
    .one-face{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .two-face,
    .three-face,
    .four-face{
        display: flex;
        justify-content: space-between;
    }
    .two-face .pot:nth-of-type(2){/*匹配属于父元素的特定类型的第 N 个子元素的每个元素*/
        align-self: flex-end;
    }
    [class^='row']{
        display: flex;
        flex-direction: column;
    }
    .three-face .pot:nth-of-type(2){
        align-self: center;
    }
    .three-face .pot:nth-of-type(3){
        align-self: flex-end;
    }
    .four-face .column{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
</style>

实例二 一点骰子之九种布局

实现效果如下：

html代码

<div class="one-first-left-face">
    <span class="pot"></span>
</div>

css样式代码

body{
    background-color: black;
}
.dice{
    display:flex;
    justify-content: center;/*水平方式对齐*/
    align-items: center;/*垂直方向对齐*/
    flex-wrap: wrap;/*换行*/   
}
[class $='face']{
    margin:16px;
    padding:4px;
    background-color: lightgray;
    width: 120px;
    height:120px;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
    border-radius: 10%;   
}
.pot{
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 4px;
    background-color: #333;
    -webkit-box-shadow: inset 0 3px #111,inset 0 -3px #555;
    box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.one-first-center-face{
    display: flex;
    justify-content: center;
}
.one-first-right-face{
    display: flex;
    justify-content: flex-end;
}

.one-sec-left-face{
    display: flex;
    align-items: center;
}
.one-sec-center-face{
    display: flex;
    justify-content: center;
    align-items: center;
}
.one-sec-right-face{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.one-thi-left-face{
    display: flex;
    align-items: flex-end;
}
.one-thi-center-face{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.one-thi-right-face{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

实例三 其余样式骰子

实现效果如下：

html代码

<div class="dice">
    <div class="two-top-face">
        <span class="pot"></span>
        <span class="pot"></span>
    </div>
    <div class="two-left-face">
        <span class="pot"></span>
        <span class="pot"></span>
    </div>
    <div class="two-center-face">
        <span class="pot"></span>
        <span class="pot"></span>
    </div>
    <div class="two-one-center-face">
        <span class="pot"></span>
        <span class="pot"></span>
    </div>

    <div class="four-face">
        <div class="column">
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>

    <div class="six-face">
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>
    <div class="six-sec-face">
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>
    <div class="six-thi-face">
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>

    <div class="nine-face">
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="column">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>
</div>

css样式代码

body{
    background-color: black;               
}
.dice{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
[class $='face']{
    margin:16px;
    padding:4px;
    background-color: lightgray;
    width: 120px;
    height:120px;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
    border-radius: 10%;   
}
.pot{
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 4px;
    background-color: #333;
    -webkit-box-shadow: inset 0 3px #111,inset 0 -3px #555;
    box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.two-top-face,
.four-face,
.six-face,
.six-sec-face,
.nine-face
{
    display: flex;
    justify-content: space-between;
}
.two-left-face{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.two-center-face{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.two-one-center-face{
    display: flex;
    justify-content: flex-start;
}
.two-one-center-face .pot:nth-of-type(2){
    align-self: center;
}
.four-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.six-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.six-sec-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.six-thi-face{
   display:flex;
   flex-wrap:wrap;

}
.six-thi-face .column{
    display:flex;
    flex-basis: 100%;
    justify-content: space-between;
}
.six-thi-face .column:nth-child(2){
   justify-content: center;
}
.six-thi-face .column:nth-child(3){
   justify-content: space-between;
}

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