导读 在网页设计中，如何让多个`div`元素优雅地实现自动换行？答案就是使用CSS Flexbox弹性布局！✨今天就来手把手教你实现这一功能，并附上简...
在网页设计中，如何让多个`div`元素优雅地实现自动换行？答案就是使用CSS Flexbox弹性布局！✨今天就来手把手教你实现这一功能，并附上简单易懂的源码。
首先，在HTML部分创建多个`div`盒子，比如一个商品列表：
```html
Item 1
Item 2
Item 3
```
接着，在CSS中通过设置`.container`为Flex容器，开启自动换行功能：
```css
.container {
display: flex;
flex-wrap: wrap; / 开启自动换行 /
gap: 10px; / 设置间距 /
}
.item {
width: calc(33.33% - 10px); / 每行放三个，减去间距 /
background-color: f0f8ff;
padding: 10px;
text-align: center;
}
```
这样，当屏幕宽度不足时，`div`会自动换行排列，完美适配各种设备！💡快来试试吧，轻松打造响应式布局！💪
版权声明：本文由用户上传，如有侵权请联系删除！