如何解决css父盒子使用flex-wrap: wrap时，子盒子会上下铺满父盒子的问题

如果父盒子使用了 `flex-wrap: wrap`，而子盒子高度不一致，会出现子盒子上下铺满父盒子的情况。解决这个问题可以尝试以下方法：

1.给子盒子设置固定高度或者 `flex-basis` 属性，使其高度一致。

2.使用 `align-items: flex-start` 让子盒子上对齐，这样就不会铺满父盒子。

3.在父盒子上添加 `max-height` 属性，限制父盒子的高度，超出部分使用滚动条显示。

示例代码如下：

.parent {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /*子盒子上对齐*/
    max-height: 500px; /*限制父盒子高度*/
    overflow-y: auto; /*显示滚动条*/
}

.child {
    flex-basis: 25%; /*每行显示4个*/
    height: 100px; /*设置固定高度*/
    /*子盒子样式*/
}

相关问题

当父盒子使用了flex-wrap: wrap时，如何不让子盒子在父盒子内部垂直平均分布。

可以使用`align-content`属性来控制子盒子在垂直方向上的分布方式。默认值是stretch，会让子盒子在垂直方向上平均分布。如果要让子盒子不平均分布，可以设置为其他值，比如`flex-start`、`flex-end`、`center`等。例如：

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

设置了`align-content: flex-start`后，子盒子在垂直方向上会靠近父盒子顶部分布。