flex骰子模型

最新推荐文章于 2023-06-13 20:28:31 发布

安静宅男爱蓝猫

最新推荐文章于 2023-06-13 20:28:31 发布

阅读量229

点赞数

分类专栏： HTML以及移动端布局

@By-蓝猫

本文链接：https://blog.youkuaiyun.com/qq_43355930/article/details/114174372

版权

HTML以及移动端布局专栏收录该内容

4 篇文章

订阅专栏

flex布局盒子

flex实现骰子是一个联系flex布局的好的素材

第一种

在这里插入图片描述

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

第二种

在这里插入图片描述

.second-face {
    display: flex;
    justify-content: space-between;
}
/*将第二个点固定到盒子的下方*/
.second-face span:nth-child(2){
    align-self: flex-end;
}

第三种

在这里插入图片描述

.third-face {
    display: flex;
    justify-content: space-between;
}
.third-face span:nth-child(2){
    align-self: center;
}
.third-face span:nth-child(3){
    align-self: flex-end;
}

第四种

在这里插入图片描述

.fourth-face{
    display: flex;
    justify-content: space-between;
}
.fourth-face .column:nth-child(1){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.fourth-face .column:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

第五种

在这里插入图片描述


.fifth-face {
    display: flex;
    justify-content: space-between;
}
.fifth-face .column:nth-child(1){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.fifth-face .column:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fifth-face .column:nth-child(3){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

第六种

在这里插入图片描述

.sixth-face {
    display: flex;
    justify-content: space-between;
}
.sixth-face .column:nth-child(1){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.sixth-face .column:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}