flex-wrap用于控制弹性子元素是否换行：nowrap不换行，wrap从上到下换行，wrap-reverse从下到上换行。配合display: flex和flex-direction可实现多行布局，常用于响应式卡片、导航菜单等场景。
使用 flex-wrap 可以控制弹性容器中的子元素是否换行，以及换行方式。当弹性项目总宽度超过容器时，默认情况下它们会被压缩而不换行。通过设置
flex-wrap
flex-wrap 有三个常用取值：
让弹性子元素支持多行排列：
.container {这样当子元素总宽度超出容器时，超出的部分会自动换到下一行，形成多行布局。
立即学习“前端免费学习笔记（深入）”；
你可以将 flex-wrap 和 flex-direction 配合使用来控制主轴方向：
flex-direction: row
wrap
flex-direction: column
wrap
适合用于响应式布局，比如：
基本上就这些。只要设置
flex-wrap: wrap
display: flex
以上就是如何用css flex-wrap控制多行弹性子元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
531
收藏
