最近楼主在学习前端知识，今天刚刚看到了关于css布局的知识，前几天又看到了九宫格的题目，于是借此机会练习一下
九宫格展示效果图(只强调实现，比较丑，请见谅)：
首先，html代码如下
<body>
<div class="wrapper">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
</div>
</body>
定义了一个class为 wrapper 的div标签作为父元素，九个class为 items 的div标签作为子元素
1. 第一种方法：
<style type="text/css">
.wrapper{
margin-top: 50px;
margin-left: 50px;
width: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
border: 1px solid black;
}
.items{
background-color: aqua;
margin: 1px;
display:flex;
justify-content:center;
align-items:center;
}
</style>
把父元素设置为grid布局，里面的九个子元素会根据设置的行列属性进行排列，然后再把子元素设置为flex布局，利用其中的justify-content和align-items属性达到居中效果
2. 第二种方法：
<div class="items"><span>1</span></div>
也是利用了gird+flex布局，但是没有利用flex中的属性，而是为子元素中的文本内容加上span标签，通过设置span标签的margin属性达到居中的效果：
<style type="text/css">
.wrapper{
margin-top: 50px;
margin-left: 50px;
width: 300px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
border: 1px solid black;
}
.items{
background-color: aqua;
margin: 1px;
display:flex;
}
.items span{
margin: auto;
}
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
