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>

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

checkbox超出范围自动换行

对于超出范围的复选框，你可以通过CSS样式来控制自动换行。你可以为复选框容器元素设置以下样式：

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

这将使容器中的元素自动换行，并根据需要创建新的行。请确保适当设置容器的宽度以及内部元素的宽度和间距，以便适应你的布局需求。