flex-basis:让4个元素将行排满

`flex-basis` 是 Flexbox 盒模型中的一个属性，主要用于控制弹性布局项目在主轴方向上占据的基础尺寸。当设置了 `flex-wrap: wrap` 或者 `wrap-reverse` 后，如果一行放不下所有的弹性盒子元素，它们就会换到下一行。`flex-basis` 定义了在不考虑内容撑开（`flex-grow` 和 `flex-shrink` 的影响）情况下的每个元素初始占据的空间大小。

对于四个元素，如果你想要它们在一行上均匀分布并尽可能填满行，可以设置所有元素的 `flex-basis` 为相同的值，并且 `flex-grow` 设置为 0 来避免它们自动拉伸。例如：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 0 0 auto; /* flex-grow: 0, flex-shrink: 0, flex-basis: 自动 */
  width: calc(100% / 4 - 10px); /* 根据需要调整间距 */
}

在这个例子中，`.item` 元素会平均分配剩余可用空间，每项占据固定宽度，直到一行装不下，才会换到下一行。如果想让每一行都充满，也可以尝试使用百分比值而不是固定的像素数。

相关问题

flex布局最后一行不让铺满

Flex布局中，如果你想要让某一排的元素不会自动铺满整个容器，你可以通过设置`flex-wrap`属性为`wrap`，然后调整`flex-grow`值为0或一个较小的数字，防止某个元素无限增长。比如：

.container {
  display: flex;
  flex-wrap: wrap; /* 添加此行 */
}

.item {
  flex: 0 1 auto; /* 或者 flex-basis: auto; 这样可以让元素不再自动填充剩余空间 */
}

这里`.item`代表你需要限制大小的元素，它的flex-grow值设为0，意味着它不会自动扩大占据更多的空间。当容器宽度不足以完全展示所有 `.item` 时，它们就会换到下一行。