使用 Flexbox 显示的项目的内边距相等

Question

我有一个项目列表，我想将其显示为顶部 6 和底部 7。然而，较长单词的项目没有集中对齐。

这就是目前的样子。

如您所见，结果/KPI 并未集中对齐，但其他则一致。

这是我目前的代码

<div className="innerTabs">
    {Object.values(title).map((item, index) => {
    return (
        <h1
        className={color === index ? "activate" : "inactive"}
        onClick={() => {
            setPage(index);
            setColor(index);
        }}
        >
        {" "}
        {item}{" "}
        </h1>
    );
    })}
</div>

.innerTabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.innerTabs h1 {
  flex: 0 0 calc(16.66% - 20px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerTabs h1:hover {
  color: lightgray;
  cursor: pointer;
}

#contractNotes {
  width: 300px;
}

h1.activate {
  color: #6610f2;
  background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16));
  border-radius: 26px;
  margin: 10px 0 10px 0;
  font-weight: 600;
}

h1.activate:hover {
  color: #6610f2;
  background: var(--light-opacity-color-primary-primary-16, rgba(115, 103, 240, 0.16));
  border-radius: 26px;
  margin: 10px 0 10px 0;
  font-weight: 600;
}

h1.inactive {
  color: black;
  margin: 10px 0 10px 0;
}

Answer 1

只需添加以下规则：

.innerTabs h1 {
  text-align: center;
}

演示片段：

.innerTabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.innerTabs h1 {
  flex: 0 0 calc(16.66% - 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: red;
  text-align: center;
}

<div class="innerTabs">
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred is dead</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
  <h1>Fred</h1>
</div>