使用flex布局写出色子案例

最新推荐文章于 2024-04-23 11:04:30 发布

weixin_75066187

最新推荐文章于 2024-04-23 11:04:30 发布

阅读量328

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_75066187/article/details/130052023

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、Flex是什么？
二、代码内容
- 1.html
- 2.css
总结

前言

flex布局是一个应用非常广泛的布局，再网页的制作中非常好用，今天我们就通过这个骰子的案例学习一下,下面是代码成果展示：

一、Flex是什么？

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局

二、代码内容

1.html

代码如下（示例）：

<body>
		<div class="boby">
			<div id="con">
			<div class="num1">
				<div></div>
				
			</div>	
			</div>
			
			<div id="con">
				<div class="num2">
				<div></div>
				<div></div>
			</div>
			</div>
			
			<div id="con">
				<div class="num3">
				<div></div>
				<div></div>
				<div></div>
				
			</div>
			</div>
			
			
			<div id="con">
					<div class="num4">
				<div class="coulum">
					<div></div>
					<div></div>
				</div>
				<div class="coulum">
					<div></div>
					<div></div>
				</div>
			</div>
			</div>
			
			<div id="con">
				<div class="num5">
					<div class="coulum">
						<div></div>
						<div></div>
					</div>
					<div class="coulum">
						<div></div>
					</div>
					<div class="coulum">
						<div></div>
						<div></div>
					</div>
				
			</div>
			</div>
			
			<div id="con">
				<div class="num6">
					<div class="coulum">
						<div></div>
						<div></div>
					</div>
					<div class="coulum">
						<div></div>
						<div></div>
					</div>
					<div class="coulum">
						<div></div>
						<div></div>
					</div>
				
			</div>
			</div>
			
			
			
		</div>
	</body>

2.css

代码如下（示例）：

			.boby{
			
			display: flex;
			width: 1000px;
			height: 1000px;
			
			background-color: lightgray;
			flex-wrap: wrap;
			
			
		}
		.boby #con{
			display: flex;
			justify-content: center;
			align-items: center;
			
			width:33.3%;
			height: 50%;
		}
		.boby .num1 {
			display: flex;
			border: 0px solid gainsboro ;
			width: 200px;
			height: 200px;
			background-color: white;
			border-radius: 20px;
			box-shadow: 5px 15px 25px gray ;
			justify-content: center;
			align-items: center;
		}
		.boby .num1 div{
			
			width: 40px;
			height: 40px;
			background-color: red;
			
			border-radius: 150px;
		}
		.boby .num2 {
		
		
			display: flex;
			border: 0px solid gainsboro ;
			width: 200px;
			height: 200px;
			background-color: white;
			border-radius: 20px;
			box-shadow: 5px 15px 25px gray ;
			flex-direction: column;
			
			justify-content: space-around;
			
		}
		.boby .num2 div{
			
			margin: 30px;
			
			width: 40px;
			height: 40px;
			background-color: red;
			
			border-radius: 150px;
		}
		.boby .num2 div:nth-child(2){
			align-self: flex-end;
		}
		
		.boby .num3 {
		
		
			display: flex;
			border: 0px solid gainsboro ;
			width: 200px;
			height: 200px;
			background-color: white;
			border-radius: 20px;
			box-shadow: 5px 15px 25px gray ;
			flex-direction: column;
			
			justify-content: space-around;
			
		}
		.boby .num3 div{
			
			margin: 10px;
			
			width: 40px;
			height: 40px;
			background-color: red;
			
			border-radius: 150px;
		}
		.boby .num3 div:nth-child(2){
			align-self: center;
		}
		
		.boby .num3 div:nth-child(3){
			align-self: flex-end;
		}
		.boby .num4{
			display: flex;
			border: 0px solid gainsboro ;
			width: 200px;
			height: 200px;
			background-color: white;
			border-radius: 20px;
			box-shadow: 5px 15px 25px gray ;
			flex-direction: column;
			
			justify-content: space-around;
		}
		
		.boby .num4 .coulum{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		
		.boby .num4 .coulum div{
			width: 40px;
			height: 40px;
			background-color: red;
			
			border-radius: 150px;
			
		}
		.boby .num5{
			
			display: flex;
			border: 0px solid gainsboro ;
			width: 200px;
			height: 200px;
			background-color: white;
			border-radius: 20px;
			box-shadow: 5px 15px 25px gray ;
			flex-direction: column;
			
			justify-content: space-around;
		}
		
		.boby .num5 .coulum{
			
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		.boby .num5 .coulum div{
			width: 40px;
			height: 40px;
			background-color: red;
			
			border-radius: 150px;
			
		}
		
		.boby .num6{
			
			display: flex;
			border: 0px solid gainsboro ;
			width: 200px;
			height: 200px;
			background-color: white;
			border-radius: 20px;
			box-shadow: 5px 15px 25px gray ;
			flex-direction: column;
			
			justify-content: space-around;
		}
		
		.boby .num6 .coulum{
			
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}
		.boby .num6 .coulum div{
			width: 40px;
			height: 40px;
			background-color: red;
			
			border-radius: 150px;
			
		}
	</style>