Flex布局——色子的小案例

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

pdsu_zhao

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

阅读量734

点赞数

分类专栏： Flex布局文章标签： flex 布局制作色子 align-items justify-content

本文链接：https://blog.csdn.net/zxy9602/article/details/53138785

版权

Flex布局专栏收录该内容

7 篇文章 0 订阅

订阅专栏

制作色子，即制作相对应的1-6的几个点

1、运用知识点

a、容器——container

b、项目——item

代码示例：

</div>

2、主要采用上述两个的属性值进行编辑

例如：flex-direction方向——row、column、row-reverse、column-reverse

jusitfy-content:center——水平居中

flex-wrap：wrap——允许换行

align-items：center——表示对角方向居中(三点时)

align-self：flex-end/start——要覆盖前边的align-items(四点时)

等等。

3、相应的实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.container{
				display: flex;
				padding: 10px;
				width: 120px;height: 120px;
				border: 3px solid #ddd;
				border-radius: 10px;
				background: #fff;
				box-shadow: 3px 3px 3px 0px #999;
				margin: 5px;
			}
			.item{
				width: 50px;height: 50px;
				background: #999;
				border-radius: 50%;  /*可以绘制成一个圆形*/
				box-shadow: 1px 1px 2px 0px #999;
			}
			.one{
				justify-content: center;  /*水平居中*/
				align-items: center;    /*交叉轴——垂直居中*/
			}
			
			.two{
				justify-content: space-around;
				align-items:center;
			}
			.two1{
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
			}
			.three{
				flex-direction: column;
				justify-content: space-around;/*主轴方向上分散的对齐*/
				align-items: center;
			}
			.three div:first-child{
				align-self: flex-start;  /*覆盖前边的align-item:center;*/
			}
			.three div:last-child{
				align-self: flex-end;
			}
			.four{
				flex-wrap: wrap;   /*表示允许换行*/
 			}
 			.four .item{
 				margin: 7px;   /*设置margin间距变大，即符合换行的条件*/
 			}
 			.four1,.five,.six{
 				flex-direction: column;
 				justify-content: space-around;
 			}
 			.four1 >div,.five >div,.six >div{
 				display: flex;
 				justify-content: space-around;
 			}
		</style>
	</head>
	<body>
		<div class="container six">
			<div><!--第一行-->
				<div class="item"></div>
				<div class="item"></div>
			</div>
			<div><!--第二行-->
				<div class="item"></div>
				<div class="item"></div>
			</div>
			<div><!--第三行-->
				<div class="item"></div>
				<div class="item"></div>
			</div>
		</div>
		<div class="container five">
			<div>
				<div class="item"></div>
				<div class="item"></div>
			</div>
			<div>
				<div class="item"></div>
			</div>
			<div>
				<div class="item"></div>
				<div class="item"></div>
			</div>
		</div>
		
		<!--在container里边进行嵌套，container本身是一个容器，它有两个项目，同时这两个项目本身也是一个容器-->
		<div class="container four1">
			<div><!--第一行-->
				<div class="item"></div>
				<div class="item"></div>
			</div>
			<div><!--第二行-->
				<div class="item"></div>
				<div class="item"></div>
			</div>
		</div>
		<!--<div class="container four">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>-->
		
		<!--
			<div class="container two">
			<div class="item"></div>
			<div class="item"></div>
			</div>
		-->
		<div class="container three">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<div class="container two1">
			<div class="item"></div>
			<div class="item"></div>
		</div>
		
		<div class="container one">
			<div class="item"></div>
		</div>
	</body>
</html>

pdsu_zhao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局——色子的小案例

制作色子，即制作相对应的1-6的几个点1、运用知识点a、容器——containerb、项目——item代码示例：>2、主要采用上述两个的属性值进行编辑例如：flex-direction方向——row、column、row-reverse、column-reversejusitfy-content:center——水平居中flex-wrap：wra
复制链接

扫一扫

专栏目录