利用flex布局实现骰子

最新推荐文章于 2024-04-09 12:00:03 发布

lxx-sissi

最新推荐文章于 2024-04-09 12:00:03 发布

阅读量889

点赞数

分类专栏： css 文章标签： flex

本文链接：https://blog.csdn.net/sinat_35438535/article/details/102858778

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
      	.bg{
      		width: 300px;
      		height: 300px;
      		background-color: #000;
      		padding-top: 50px;;
      	}
      	.item{
      		display: block;
      		width: 20px;
      		height: 20px;
      		background-color: #000;
      		border-radius: 10px;
      	}
      	.box{
      		width: 105px;
      		height: 105px;
      		background-color: rgb(231,231,231);
      		margin: 0 50px;
      		border-radius: 20px;
      		padding: 5px 5px;
      		border: 6px solid rgb(215,215,215);
      		
      		/*一点*/
      		/*display: flex;*/  /*默认项目主轴对齐方式为左对齐  flex-start*/
      		/*justify-content: flex-end;*/  /*设置项目主轴对齐方式为右对齐*/
      		/*justify-content: center;*/ /*设置项目主轴对齐方式为居中对齐*/
      		/*align-items: flex-start; */  /*设置项目交叉轴对齐方式为上对齐*/
      		/*align-items: flex-end; */  /*设置项目交叉轴对齐方式为下对齐*/
      		/*align-items: center;*/   /*设置项目交叉轴对齐方式为居中对齐*/
      		
      		/*二点*/
      		/*display: flex;*/
      		/*justify-content: space-between;*/
      		
      		/*三点*/
      		/*display: flex;
      		justify-content: space-between;*/
      		
      		/*四点*/
      		display: flex;
      		flex-wrap: wrap;
      		justify-content: space-between;
      		
      		
      	}
      	/*二点*/
      	/*.item:nth-child(2){*/
      		/*align-self: flex-end; */  /*这个属性是用来定义单个元素*/
      	/*}*/ 
      	
      	
      	/*三点*/
      	/*.item:nth-child(2){
      		align-self: center;
      	}
      	.item:nth-child(3){
      		align-self: flex-end;
      	}*/
      	
      	/*四、五、六、七、八、九点*/
      	.column{
      		flex-basis: 100%; 
      		display: flex;
      		justify-content: space-between;
      	}
      	
      	.column:nth-child(2){
      		justify-content: center;
      		margin-top: -20px;
      	}
      	.column:nth-child(3){
      		justify-content: flex-end;
      		margin-top: -20px;
      	}
      	.column:nth-child(5){
      		align-self: flex-end;
      	}
      	.column:nth-child(4){
      		align-self: center;
      		/*justify-content: center;*/
      	}
      </style>
   </head>

   <body>
   <div class="bg">
	   <div class="box">
		   	<div class="column">
		      	<span class="item"></span>
		   	</div>
		   	<div class="column">
		      	<span class="item"></span>
		   	</div>
		   	<div class="column">
		      	<span class="item"></span>
		   	</div>
		   	<div class="column">
		   		<span class="item"></span>
		   		<span class="item"></span>
		   	</div>
		   	<div class="column">
		   		<span class="item"></span>
		      	<span class="item"></span>
		   	</div>
	   </div>
	</div>
   </body>

</html>

lxx-sissi

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
利用flex布局实现骰子

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .bg{ width: 300px; ...
复制链接

扫一扫

专栏目录