html flex自动换行,css flex布局超长自动换行的示例代码
时间: 2023-07-09 14:34:15 浏览: 55
HTML代码:
```html
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
<div class="flex-item">9</div>
<div class="flex-item">10</div>
</div>
```
CSS代码:
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 100px;
height: 50px;
background-color: #ddd;
margin: 10px;
}
```
解释:
上述代码中,我们创建了一个 flex 容器,即 class 为 `.flex-container` 的 div 元素。同时,我们将 `flex-wrap` 属性设置为 `wrap`,以实现自动换行。
在容器中,我们添加了 10 个子元素,即 class 为 `.flex-item` 的 div 元素。这些子元素的宽度为 100px,高度为 50px,背景颜色为 #ddd。我们将它们的 margin 设置为 10px,以实现间距效果。
当容器宽度不足以容纳所有子元素时,子元素会自动换行,以适应容器的大小。这就是 flex 布局的自动换行效果。