如何让footer内三元素均匀分布并为ul元素设置间距？

一、给ul元素设置子项间距 #

直接用Flex布局的gap属性就能精准控制列表项间距，避免margin带来的边缘冗余间距问题：

ul {
  display: flex;
  /* 横向排列保留此属性，纵向排列则删除 */
  flex-direction: row;
  /* 自定义li之间的间距，单位按需调整 */
  gap: 1.5rem;
}

如果是纵向列表，只需将flex-direction改为column，gap属性依然生效。

二、让footer的三个元素均匀拉伸分布 #

放弃justify-content: space-between，改为给三个子元素设置flex: 1，让它们平分footer的可用宽度：

footer {
  display: flex;
  width: 100%;
}

footer .left,
footer .center,
footer .right {
  flex: 1;
  /* 可选：控制元素内部内容的对齐方式，可替换为flex-start或flex-end */
  display: flex;
  justify-content: center;
}

设置后三个元素会自动填充footer宽度，各自占据相等空间，完美实现均匀拉伸分布。

内容的提问来源于stack exchange，提问作者bokoboko