用flex布局实现一到九点骰子效果

本文章只给出flex布局实现的部分

一点

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

.s {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

效果如下：

两点

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

.s {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
/*第二个点的位置*/
.s2 .item:nth-of-type(2) {
    align-self: flex-end;
}

效果如下：

三点

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

.s {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
/*实现第二、第三点*/
.s3 .item:nth-of-type(2) {
    align-self: center;
}
.s3 .item:nth-of-type(3) {
    align-self: flex-end;
}

效果如下：

四点

<div class="s">
    <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>

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

效果如下：

五点

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

.s {
    display: flex;
    justify-content: space-between;
}
.item {
    align-self: center;
}
.column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

效果如下：

六点

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

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

效果如下：

七点

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

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

效果如下：

八点

<div class="s">
    <div class="column">
        <div class="item"></div>
        <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 class="item"></div>
    </div>
</div>

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

效果如下：

九点

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

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

效果如下：