阅读 550

用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;
}
复制代码

效果如下:

文章分类
前端
文章标签