display布局超出时自动换行

你可以在CSS中使用`display: flex`和`flex-wrap: wrap`属性来实现超出时自动换行的布局。具体实现方法如下：

1. 在父元素上设置`display: flex`，表示使用弹性布局。

2. 在父元素上设置`flex-wrap: wrap`，表示超出时自动换行。

3. 在子元素上设置宽度，可以使用百分比或者像素值等。

例如，下面的代码实现了一个超出时自动换行的布局：

<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>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}
</style>

这样，当子元素的总宽度超出父元素的宽度时，子元素会自动换行。

相关问题

display: flex; 自动换行

`display: flex;` 是 CSS3 中用于创建弹性盒模型的一种布局模式，它允许元素在一行内自动换行，以便更好地利用可用空间。当元素过多，无法在同一行完全展示时，`flex-wrap` 属性控制了换行的行为：

- `nowrap` (默认)：元素不会换行，超出部分将被隐藏。
- `wrap`：元素会在需要的时候换到下一行，每一行都尽可能地填满可用空间。
- `wrap-reverse`：类似 `wrap`，但是元素从最后一行开始往上排列。

下面是一个简单的示例，展示了如何使用 `display: flex;` 和 `flex-wrap: wrap;` 实现元素自动换行：

<div style="display: flex; flex-wrap: wrap;">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
</div>

在这个例子中，如果元素的宽度不足以放下所有五个，它们会换到下一行继续显示。

flex布局 让其自动换行

在Flex布局中，可以通过设置flex-wrap属性来实现自动换行。

flex-wrap属性有三个可能的值：
1. nowrap：默认值，表示不换行。
2. wrap：在需要换行时，会进行换行。
3. wrap-reverse：在需要换行时，会进行换行，但是反向排列。

例如，使用以下CSS代码可以实现Flex布局的自动换行：

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

在上述代码中，`.container`表示Flex容器，`flex-wrap: wrap;`表示当子元素超出容器宽度时，会自动换行。

这样就可以实现Flex布局的自动换行效果了。