flex 布局 一行固定显示4个多出换行

可以使用 flex 布局的 `flex-wrap` 属性来实现一行固定显示4个，多出的自动换行，具体的实现方式如下：

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

.item {
  flex: 0 0 calc(25% - 10px); /* 一行显示4个，减去间距 */
  margin-right: 10px;
  margin-bottom: 10px;
}

在上面的代码中，`.container` 是包含所有子元素的容器，`.item` 是每个子元素。通过设置 `.container` 的 `flex-wrap: wrap` 属性，子元素会自动换行。同时，通过设置 `.item` 的 `flex: 0 0 calc(25% - 10px)` 属性，每个子元素占据 25% 的宽度（减去间距），即一行显示 4 个。`margin-right` 和 `margin-bottom` 则是为了设置子元素之间的间距。

相关问题

lex 布局 一行固定显示5个多出换行

对于一个使用lex布局的容器，如果要实现一行固定显示5个元素，超过的元素自动换行，可以使用如下的CSS样式：

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

.item {
  flex: 0 0 20%;
  /* 宽度为容器宽度的1/5 */
}

其中，`.container` 为容器的类名，`.item` 为每个元素的类名。通过设置 `.container` 的 `display` 属性为 `flex`，并且设置 `flex-wrap` 属性为 `wrap`，即可让元素超出容器范围时自动换行。

同时，为了让每个元素固定显示为一行的 5 个，可以设置每个元素的 `flex` 属性为 `0 0 20%`，其中 `20%` 表示元素宽度为容器宽度的 1/5。这样，每行就能够显示 5 个元素了。

flex布局一行4个，超出4个换行

可以使用Flex布局实现一行显示4个元素，超出4个元素时自动换行。下面是一个简单的示例代码：

HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

CSS:

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

.item {
  flex: 0 0 25%; /* 每个元素占据25%的宽度 */
  box-sizing: border-box;
  border: 1px solid #000;
}

在上面的示例中，我们使用`display: flex`将容器设置为Flex布局，然后使用`flex-wrap: wrap`使超出容器宽度时元素自动换行。每个元素使用`flex: 0 0 25%`来指定每个元素占据容器宽度的25%，这样就可以保证一行显示4个元素。为了便于区分每个元素，我们给它们添加了边框样式。

这样，当元素个数超过4个时，它们会自动换行并在下一行继续显示。你可以根据实际需求调整每个元素的宽度和样式。