justify-content: space-evenly;
和 justify-content: space-between;
是 CSS 中用于设置弹性容器(flex container)中子元素(flex items)在主轴上的对齐方式的属性。
-
justify-content: space-evenly;
:将子元素沿主轴均匀分布,每个子元素之间的间距相等,同时第一个子元素与容器的起始端和最后一个子元素与容器的末尾端之间的间距也相等。这意味着空白空间将平均分配给所有子元素。 -
justify-content: space-between;
:将子元素沿主轴均匀分布,每个子元素之间的间距相等,但是第一个子元素与容器的起始端之间没有间距,最后一个子元素与容器的末尾端之间也没有间距。这意味着空白空间仅在子元素之间进行分配。
简单来说,两者的区别在于对容器两端的间距处理。space-evenly
会在容器两端和子元素之间均匀分配空白空间,而 space-between
只在子元素之间均匀分配空白空间,容器两端没有额外的间距。