文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！

（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！

作者头像
凉凉心.
发布于 2025-10-13 17:56:15
发布于 2025-10-13 17:56:15
2520
举报
文章被收录于专栏：CSDN专栏CSDN专栏

HTML文件

代码语言：javascript
复制
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=0"> 
	<title>flex demo</title>
	<link rel="stylesheet" href="css/flexcss.css">
	<style>
	</style>
</head>

<body>
	<div class="container">
		<!--第一个骰子-->
		<div class="row1">
			<span></span>
		</div>
		<!--二个骰子-->
		<div class="row2_0">
			<span></span>
			<span></span>
		</div>
		<div class="row2_1">
			<span></span>
			<span></span>
		</div>
		<div class="row2_2">
			<span></span>
			<span></span>
		</div>
		<div class="row2_3">
			<span></span>
			<span></span>
		</div>
		<!--三个骰子-->
		<div class="row3_0">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div class="row3_1">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div class="row3_2">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div class="row3_3">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div class="row3_4">
			<span></span>
			<span></span>
			<span></span>
		</div>
		<!--四个骰子-->
		<div class="row4_0">
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="row4_1">
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
		</div>
		<!--五个骰子-->
		<div class="row5_0">
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
		</div>
		<!--六个骰子-->
		<div class="row6_0">
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="row6_0">
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
		</div>
		<!--七个骰子-->
		<div class="row7_0">
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="row7_1">
			<div class="box">
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<!--八个骰子-->
		<div class="row8_0">
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="row8_0">
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="row8_0">
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="box">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</div>
</body>
</html>

CSS文件

代码语言：javascript
复制
@charset "utf-8";
/* CSS Document */
span{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
}
.box{
	display: inline-flex;
}
.container{
	display: flex;
	flex-wrap: wrap;
	height: 800px;
	background: #fafafa;
	
}
.container>div{
	width: 200px;
	height: 200px;
	margin: 5px;
	background: #EBACAD;
	display: inline-flex;
}
.row1{
	justify-content: center;
	align-items: center;
}
.row2_0{
	justify-content: space-between;
}
.row2_1{
	flex-direction: column;
	justify-content: space-between;
}
.row2_2 {
	justify-content: space-between;
}
.row2_2 span:nth-child(2){
	align-self: flex-end;
}
.row2_3{
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}
.row3_0{
	justify-content: space-between;
}
.row3_1{
	justify-content: space-between;
	flex-direction: column;
}
.row3_2{
	align-items: flex-end;
	justify-content: space-between;
}
.row3_3{
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
.row3_4{
	justify-content: space-between;
}
.row3_4 span:nth-child(2){
	align-self: center;
}
.row3_4 span:nth-child(3){
	align-self: flex-end;
}
.row4_0{
	justify-content: space-between;
	flex-direction: column;
}
.row4_0>div{
	justify-content: space-between;
}
.row4_1{
	justify-content: flex-start;
	flex-direction: column;
}
.row5_0{
	flex-direction: column;
	justify-content: space-between;
}
.row5_0 div{
	justify-content: space-between;
}
.row5_0 div:nth-child(2){
	align-self: center;
}
.row6_0{
	flex-direction: column;
	justify-content: space-between;
}
.row6_0>div{
	justify-content: space-between;
}
.row7_0{
	flex-direction: column;
	justify-content: space-between;
}
.row7_0>div{
	justify-content: space-between;
}
.row7_1{
	flex-direction: column;
	justify-content: space-between;
}
.row7_1>div{
	justify-content: space-between;
}
.row7_1>div:first-child{
	align-self: center;
}
.row8_0{
	flex-direction: column;
	justify-content: space-between;
}
.row8_0>div{
	justify-content: space-between;
}
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-09-14，如有侵权请联系 cloudcommunity@tencent.com 删除
css
class
flex
space
布局
目录
  • HTML文件
  • CSS文件

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档