布局的时候,我们常常会需要一行排列3/4/5/6个盒子,必要时自动换行,这时可以借助CSS3中的flex-wrap属性。

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

nowrap为默认值,wrap必要时实现自动换行,reverse必要时换行并反向排列

使用flex-wrap实现弹性盒自动换行使用flex-wrap实现弹性盒自动换行

关键是在父元素中设置flex-wrap值为wrap, 然后是设置子元素的width为合适的值,盒子间设置间距的话借助margin属性,效果如下:

使用flex-wrap实现弹性盒自动换行

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-29
  • 2021-11-28
  • 2021-11-08
  • 2022-01-15
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-01-22
  • 2022-12-23
  • 2022-01-27
相关资源
相似解决方案