如何在div中应用flex-wrap属性？附HTML及CSS代码示例
2026-5-28
如何在你的div中实现flex-wrap效果
我来帮你把flex-wrap的实现捋清楚，你已经有了基础的代码，只需要补充一些关键细节就能让它正常生效，下面是具体的步骤和优化方案：
1. 确认flex容器的核心属性
你已经在.charts类中添加了display: flex和flex-wrap: wrap，这是启用换行的基础。不过可以做一些优化，让布局更健壮：
.charts { min-height: 162px; /* 把固定height改成min-height，避免换行后内容被截断 */ background-color: #f3eaeacc; width: 100%; display: flex; flex-wrap: wrap; /* 核心属性，开启自动换行 */ border-radius: 10px; margin-bottom: 5px; gap: 5px; /* 用gap统一设置子元素间距，比margin更简洁 */ padding: 5px; /* 给容器加内边距，让子元素不贴边 */ }
flex-wrap: wrap：这是让子元素在容器宽度不足时自动换行的核心，必须加在flex容器上（也就是你的.chartsdiv）。min-height：替代固定高度，确保容器能根据子元素的行数自动调整高度，避免内容溢出。gap：直接控制子元素之间的水平和垂直间距，无需处理margin的外边距折叠问题。
2. 给flex子元素设置合适的宽度
flex-wrap生效的前提是：子元素的总宽度超过容器宽度。所以需要给.charts里的子元素设置宽度，比如希望每行放2个元素，可以这样写：
.chart-item { flex-basis: calc(50% - 5px); /* 每个子元素占容器宽度的50%，减去gap的一半避免溢出 */ background-color: #fff; border-radius: 5px; padding: 10px; box-sizing: border-box; /* 确保padding不会增加子元素的实际宽度 */ }
flex-basis：用来设置子元素的初始宽度，配合flex-wrap: wrap，当总宽度超过容器时就会自动换行。box-sizing: border-box：让padding和border包含在设置的宽度内，避免布局错乱。
3. 完整的代码示例
把上述调整整合到你的代码中，最终效果如下：
<html> <head> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> .charts { min-height: 162px; background-color: #f3eaeacc; width: 100%; display: flex; flex-wrap: wrap; border-radius: 10px; margin-bottom: 5px; gap: 5px; padding: 5px; } .chart-item { flex-basis: calc(50% - 5px); background-color: #ffffff; border-radius: 5px; padding: 10px; box-sizing: border-box; } </style> </head> <body> <div class="row"> <div class="col s12"> <div class="col s6 content-box"> <div class="subcontent" id="main" > </div> <!--sub content div for table--> <div class="subcontent"> <div id="chart1" class="charts"> <div class="chart-item">第一个图表内容</div> <div class="chart-item">第二个图表内容</div> <div class="chart-item">第三个图表内容</div> <div class="chart-item">第四个图表内容</div> </div> </div> </div> <div class="col s6 content-box"> </div> </div> </div> </body> </html>
4. 额外提示
- 如果需要响应式布局，比如在小屏幕上每行只放1个元素，可以结合Media Query调整
flex-basis：
@media (max-width: 600px) { .chart-item { flex-basis: 100%; } }
- 你用了Materialize的栅格系统（
col s6），在小屏幕上.content-box会自动占满宽度，flex-wrap依然会根据子元素宽度自动调整，保持响应式效果。
内容的提问来源于stack exchange，提问作者AMIT KUMAR
