南宁小程序开发:www.zkelm.com
骰子布局 4 5 6 三个点数的布局,要是使用到纵向布局的思路。所以用独立一个文章来做介绍。更方便大家理解已学习
1.先干6个骰子的排版
<div class="flexcontainer">
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</div>
为了更清楚的看到flexcolumn的排序,我加了一个边框
.flexcolumn{
border:1px solid #f55;
}
默认排版如图:
默认 flexcolumn 是的 默认排版 flex-directive:row
现在加入属性 把 他们 column 排布
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
box-shadow:2px 2px 3px #888;
flex-direction: column;
}
显示如下:他们开始往下排布,
ok! 现在让 column 的元素 row 排布, 只需要给他定义display:flex 即可
接下来,我们只需要把 column元素 撑开, 方法就是在
.flexcontainer{
justify-content:space-between
}
效果:
去掉 红边:
4个点的 :简单 直接去掉两个 flexitems元素即可,然后添加 justify-content:space-between;
完整代码如下
<body>
<head>
<title>骰子-一点布局居中</title>
<style>
body{background:#000;}
.box{
display:flex;
width:90px;
height:90px;
border:1px solid #fff;
background:#bbb;
border-radius:10px;
justify-content:center;
align-items:center;
}
.flexcontainer{
display:flex;
width:80px;
height:80px;
border:1px solid #ddd;
border-radius:8px;
background:#ddd;
box-shadow:2px 2px 3px #888;
flex-direction: column;
justify-content: space-between;
}
.flexitems{
margin:3px;
width:20px;
height:20px;
background:#000;
border-radius:50%;
}
.flexcolumn{
display:flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<div class="flexcontainer">
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</div>
</body>
运行如下:
对于5个点的怎么操作呢? 就是用三个column即可
html代码如下
<div class="box">
<div class="flexcontainer">
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
</div>
<div class="flexcolumn">
<div class="flexitems"></div>
<div class="flexitems"></div>
</div>
</div>
</div>
运行结果如下:
接下来就是:把中间的点居中
.flexcolumn:nth-child(2){
justify-content:center;
}
运行结果如下:
好咧,接下来的话,下一章,准备让这个骰子动起来!希望大家支持一下我的公司。我们几个程序员一起创业,创业不容易,有好项目欢迎大家一起交流
广西小程序开发:www.zkelm.com