<div class="parent"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div>,父盒子flex为1,子盒子高度50%,第一行两个,第二行三个,第一行子盒子margin-bottom 为15
时间: 2023-08-14 15:24:13 浏览: 87
flex多行布局弹性盒子
这道题目看起来像是一个CSS布局的问题。根据题意,父盒子的样式应该是:
```css
.parent {
display: flex;
flex-wrap: wrap;
height: 100%;
}
```
这里的 `flex-wrap: wrap` 是用来让子盒子换行的。子盒子的样式是:
```css
.box1, .box2, .box3, .box4, .box5 {
flex: 1 0 40%;
height: 50%;
margin-right: 10px;
}
.box1, .box2 {
margin-bottom: 15px;
}
```
这里的 `flex: 1 0 40%` 是用来让子盒子平分容器的宽度,同时 `height: 50%` 是用来让子盒子的高度为父容器的一半。`margin-right: 10px` 是用来给子盒子之间加上一点间距。最后,`.box1, .box2` 的 `margin-bottom: 15px` 是用来给第一行的子盒子之间加上一些间距。
阅读全文