Flex Box页面布局实战课程-九宫格布局-三个项目的布局

2024-11-25 来源：个人技术集锦

效果图
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>九宫格布局-三个项目的布局:黄菊华老师</title>
</head>
<body>
<style>
.jiugongge{ width:250px; height:250px; background-color:#CCC; display:flex;flex-wrap:wrap;}
.xiangmu{ width:70px; height:70px; background-color:#0CF; margin:5px;}
</style>

<div class="jiugongge" style="align-items: center;">
	<div class="xiangmu" style="margin-bottom:auto;">01</div>
    <div class="xiangmu">02</div>
    <div class="xiangmu" style="margin-top:auto;">03</div>
</div><hr>

<div class="jiugongge" style="align-items: center;">
	<div class="xiangmu" style="align-self:flex-start;">01</div>
    <div class="xiangmu">02</div>
    <div class="xiangmu" style="align-self:flex-end;">03</div>
</div><hr>

<div class="jiugongge">
	<div class="xiangmu">01</div>
    <div class="xiangmu">02</div>
    <div class="xiangmu">03</div>
    <div class="xiangmu">04</div>
    <div class="xiangmu">05</div>
    <div class="xiangmu">06</div>
    <div class="xiangmu">07</div>
    <div class="xiangmu">08</div>
    <div class="xiangmu">09</div>
</div><hr>

</body>
</html>

显示全文

全部栏目

Flex Box页面布局实战课程-九宫格布局-三个项目的布局