flex 田字布局子元素为循环出来的
时间: 2023-07-27 16:28:53 浏览: 58
如果子元素是循环出来的,可以使用 CSS 伪类 `nth-child()` 来设置每个子元素的样式。具体设置方式根据需求而定,以下是一个示例代码:
```html
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
```
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
}
.item {
flex-basis: 33.33%;
height: 33.33%;
}
.item:nth-child(1), .item:nth-child(3), .item:nth-child(7), .item:nth-child(9) {
flex-grow: 1;
}
.item:nth-child(2), .item:nth-child(8) {
height: 66.67%;
flex-grow: 2;
}
.item:nth-child(4), .item:nth-child(6) {
width: 66.67%;
flex-grow: 2;
}
.item:nth-child(5) {
width: 66.67%;
height: 66.67%;
flex-grow: 4;
}
```
在这个例子中,每个子元素都具有相同的类名 `.item`,可以使用 `nth-child()` 来设置每个子元素的样式,例如 `nth-child(1)` 表示第一个子元素,`nth-child(2)` 表示第二个子元素,以此类推。