南宁小程序开发,挑战百日学习计划第29天（flex骰子布局教程2）

最新推荐文章于 2023-04-20 10:35:42 发布

zkelm.com

最新推荐文章于 2023-04-20 10:35:42 发布

阅读量322

点赞数 1

分类专栏：小程序南宁小程序开发文章标签：小程序 css3 软件开发

本文链接：https://blog.csdn.net/zkelm/article/details/106944915

版权

小程序同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

南宁小程序开发

25 篇文章 0 订阅

订阅专栏

南宁小程序开发：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；
}

默认排版如图：
小程序开发：www.zkelm.com
默认 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;
}

显示如下：他们开始往下排布，
小程序开发：www.zkelm.com

ok！现在让 column 的元素 row 排布，只需要给他定义display：flex 即可

在这里插入图片描述

接下来，我们只需要把 column元素撑开，方法就是在

.flexcontainer{
 justify-content：space-between
}

效果：
小程序开发：www.zkelm.com

去掉红边：
南宁小程序开发：www.zkelm.com

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>

运行如下：
南宁OA开发：www.zkelm.com

对于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>

运行结果如下：
广西小程序开发公司：www.zkelm.com

接下来就是：把中间的点居中

.flexcolumn:nth-child(2){
	justify-content:center;
}

运行结果如下：
广西小程序开发：www.zkelm.com

好咧，接下来的话，下一章，准备让这个骰子动起来！希望大家支持一下我的公司。我们几个程序员一起创业，创业不容易，有好项目欢迎大家一起交流

广西小程序开发：www.zkelm.com

zkelm.com

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
南宁小程序开发,挑战百日学习计划第29天（flex骰子布局教程2）

南宁小程序开发：www.zkelm.com骰子布局 4 5 6 三个点数的布局，要是使用到纵向布局的思路。所以用独立一个文章来做介绍。更方便大家理解已学习1.先干6个骰子的排版<div class="flexcontainer"> <div class="flexcolumn"> <div class="flexitems"></div> <div class="flexitems"></div> .
复制链接

扫一扫

专栏目录