flex布局 - justify-content: space-evenly

最新推荐文章于 2025-02-19 17:40:35 发布

高明懿大可爱

最新推荐文章于 2025-02-19 17:40:35 发布

阅读量1.1w

点赞数 4

分类专栏：前端文章标签： css3 css

本文链接：https://blog.csdn.net/qq_42459832/article/details/111195505

版权

前端专栏收录该内容

39 篇文章

订阅专栏

本文详细解析了CSS Flexbox布局中justify-content属性的使用，对比了space-between和space-evenly的区别。space-evenly在部分设备上可能存在兼容性问题，而通过巧妙的CSS技巧，可以使用space-between模拟space-evenly的效果，实现元素间距的均匀分布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

justify-content: space-evenly可以使每个元素之间和元素距离边距的距离都相等，但是兼容性比较差（iphone的SE上不支持，会失效，相当于没有设置）， space-evenly将剩余空间平均分割，例如有5个元素，这样就有6个相同宽度的间隔空间，间隔空间的数量等于元素的数量加一。

有5个元素，justify-content: space-between最左边和和最右边的元素分别占据最左边和最右边的空间，然后剩余空间平均分割，这样就有4个相同宽度的间隔空间，间隔空间的数量等于元素数量减一。

justify-content: space-between可以利用伪元素方式，在第一个元素的前边和最后一个元素的后边分别加上一个不占空间的元素，这样就是7个元素，相同宽度的间隔空间数量为6，因为左右两边元素不占空间，所以实现了space-evenly的效果。

container{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: space-between;
       //justify-content: space-evenly;
      &:before,
      &:after {
          content: '';
          display: block;
    }
}