（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
（CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
用户11865655
发布于 2025-10-13 17:56:15
发布于 2025-10-13 17:56:15
代码可运行
运行总次数：0
代码可运行
HTML文件
<!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文件
@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 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
