彭大姐 發表於 2026-5-3 22:16:51

css实现flex布局自动换行

<p>如何让flex布局让超出宽度的子元素自动换行？</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202309/20230921163448106.png" /></p>
<p>&nbsp;父级div设置了display:flex，子元素的总宽度超过父元素的宽度之后，所有子元素的width都失效了，变成了平分父元素的宽度(类似flex=1)。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202309/20230921163448107.png" /></p>
<p>解决：给父元素加上flex-flow:row wrap 之后就可以让子元素保持设置的宽度并且换行</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202309/20230921163448108.png" /></p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202309/20230921163448109.png" /></p>
頁: [1]
查看完整版本: css实现flex布局自动换行