css 九宫格怎么写 |cssposition相对

css 固定textarea，css文本绕图，css 查看元素样式，js点击标签添加css，css中文字加粗方法，css中rem可以小数吗，cssposition相对 css 九宫格怎么写 |cssposition相对

首先，大家需要在HTML中创建一个div容器，宽度为父元素的100%，高度可以按照需求设置。然后，大家将父容器的display属性设置为flex，并且设置flex-wrap为wrap，这样子元素就能自动换行了。

.div-wrapper{
display: flex;
flex-wrap: wrap;
}

接下来，大家需要对子元素的宽度和高度进行设置。因为是九宫格，所以大家将子元素的宽度设置为父容器的1/3，高度也根据需要进行设置。

.div-item{
width: 33.33%;
height: 100px;
}

然后，大家将子元素的边框和间距进行设置，这样子元素就能够分开了。

.div-item{
border: solid 1px #ccc;
margin: 10px;
}

这样大家就完成了九宫格布局的基本设置。

完整代码如下：

.div-wrapper{
display: flex;
flex-wrap: wrap;
}
.div-item{
width: 33.33%;
height: 100px;
border: solid 1px #ccc;
margin: 10px;
}

使用CSS的Flex布局，实现九宫格布局非常方便。只需要简单的几步就可以实现了。