网页编辑器
浏览器
flex-wrap 属性用于指定弹性盒子的子元素换行方式。flex-wrap：nowrap/wrap/wrap-reverse;nowrap 是flex-wrap的 默认值，弹性容器为单行。该情况下弹性子项可能会溢出容器例子：css部分： .father1{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-flex-wrap:nowrap; flex-wrap:nowrap; } .son1{ width:200px; height:100px; border:2px solid crimson; background: coral; margin:10px; text-align: center; color: #fff; }html部分：
flex-wrap：wrap ；弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。例子：css部分：.father2{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .son2{ width:200px; height:100px; border:2px solid crimson; background: coral; margin:10px; text-align: center; color: #fff; }html部分：
flex-wrap：wrap-reverse ；与 wrap相反的排列方式。例子：css部分： .father3{ width:500px; height:400px; background: lightcoral; margin:20px auto; display: -webkit-flex; display:flex; -webkit-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } .son3{ width:200px; height:100px; border:2px solid crimson; background: coral; margin:10px; text-align: center; color: #fff; }html部分：
注意浏览器的兼容性
希望小编分享的原创经验对好伙伴们有所帮助，如果小伙伴们有对本经验有任何疑问，请在下方评论处留言讨论，小编第一时间来解答！