flex布局中，元素等间距设置，包括第一个元素的左边，最后一个元素的右边，也等间距_display:flex的间距

作者：weixin_40725706 | 2024-03-15 14:49:40

踩

display:flex的间距

项目中很多地方会用到等间距排放的场景，使用flex 布局可以很方便的实现

.fu{
  display: flex;
  ustify-content: space-between;
}
1
2
3
4

通过上面代码，可以实现子元素的等间距排放。但是第一个元素和末尾的元素，到左边和右边不会等间距排放，可以通过伪元素来实现

    .zi:before{
      content: "";
      display: block;
    }
    .zi:after{
      content: "";
      display: block;
    }
1
2
3
4
5
6
7
8

这样就可以实现等间距排放了。在做下面的小程序中遇到了这个问题，记录下，希望能给你带来方便

制作头像小程序

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/241948