🌟CSS Flex弹性布局：多个div自动换行，源码分享🌟
发布时间：2025-03-16 19:56:15来源：
在网页设计中，如何让多个`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`会自动换行排列，完美适配各种设备！💡快来试试吧，轻松打造响应式布局！💪
免责声明：本答案或内容为用户上传，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 如遇侵权请及时联系本站删除。
