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个时，它们会自动换行并在下一行继续显示。你可以根据实际需求调整每个元素的宽度和样式。

相关问题

flex布局一行两个,换行

在使用flex布局时，如果想要一行显示两个元素，并在超出容器宽度时自动换行，可以按照以下步骤进行设置。

首先，在外层容器上添加`flex-wrap: wrap;`属性，这样当元素超出容器宽度时就会自动换行。例如：

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

然后，在内层元素上设置宽度，让其一行放不下，从而触发换行。可以使用百分比或者calc()函数来计算宽度。例如：

.item {
  width: 48%;
}

最后，根据需要调整元素之间的间距，可以使用`margin`属性来设置。例如：

.item {
  margin-right: 20px;
}

这样，当容器宽度不足以容纳两个元素时，它们就会自动换行显示。
#### 引用[.reference_title]
- *1* [display flex 弹性布局实现一行仅显示 2 个，每行显示指定个数（设置 space-between / space-around 超出...](https://blog.csdn.net/weixin_44198965/article/details/129022872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [flex 布局 一行两个 超出自动换行](https://blog.csdn.net/q4717529/article/details/130217842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

flex布局一行展示两个或者四个

可以使用flex布局中的`flex-wrap`属性和`flex-basis`属性来实现一行展示两个或四个元素。

1. 一行展示两个元素

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

.item {
  flex-basis: 50%;
}

2. 一行展示四个元素

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

.item {
  flex-basis: 25%;
}

以上代码中，`.container`是父元素，`.item`是子元素。`flex-wrap`属性设置为`wrap`表示子元素超出容器宽度后换行，`flex-basis`属性设置为50%或25%表示每个元素占据父元素宽度的一半或四分之一。