山海科技发展网

🌟CSS Flex弹性布局:多个div自动换行,源码分享🌟

导读 在网页设计中,如何让多个`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`会自动换行排列,完美适配各种设备!💡快来试试吧,轻松打造响应式布局!💪