使用space-evenly均匀排布元素后如何缩小间距且元素不居中

我此前使用justify-content的space-between/space-evenly实现元素等间距排布，功能运行正常。我现在需要在均匀排布的基础上缩小元素之间的间距，尝试调整line-height、修改margin都没有生效。请问均匀排布元素后是否可以缩小间距？如果无法实现，有没有合适的方案可以既实现元素均匀排布，又能自定义控制间距？

注意：我需要元素左对齐或者右对齐，不允许居中！

原有实现代码如下：

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}

<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

问题更新 #

我也尝试了gap属性，改用grid布局，但无法实现元素横向排布，始终为纵向排列，相关代码如下：

.leftHeaderItems {
  display: grid;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  left: 0%;
  width: 30%;
  height: 100%;
  grid-row-gap: 3px;
  background: inherit;
}

<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

单独使用justify-content的space-between/space-evenly时，无法直接自定义间距，这类属性的间距值是浏览器根据容器剩余宽度自动计算的，你调整子元素margin未生效大概率是样式优先级或者默认样式覆盖问题，也不推荐用margin控制间距，容易出现布局错乱问题。

以下两种方案都可以满足左/右对齐、自定义间距、均匀排布的需求：

方案1：Flex布局 + gap属性（最推荐，改动最小） #

不需要切换grid布局，直接在原有flex代码基础上修改即可：

• 将justify-content改为flex-start（左对齐）或flex-end（右对齐），不再使用space-evenly
• 新增gap属性自定义元素间距，数值可随意调整

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* 需右对齐则改为flex-end */
  align-items: center;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
  gap: 8px; /* 此处修改为你需要的间距值即可 */
}

方案2：Grid布局（适合复杂排布场景） #

你之前用grid出现纵向排列，是因为没有指定横向排布规则，新增grid-auto-flow: column即可强制横向排列：

.leftHeaderItems {
  display: grid;
  grid-auto-flow: column; /* 强制元素横向排列 */
  justify-content: flex-start; /* 需右对齐则改为flex-end */
  align-items: center;
  position: absolute;
  left: 0%;
  width: 30%;
  height: 100%;
  gap: 3px; /* 此处修改为你需要的间距值即可 */
  background: inherit;
}

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