我注意到下面的內(nèi)容在第一個(gè)元素的底部和文本之間產(chǎn)生了一個(gè)更大的距離。

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 0;
}

li{
  display:flex;
  font-size: 1.3em;
  border: 1px solid black;
  justify-content: flex-end;
}

li:nth-child(1){ font-size: 3.6em; }

li:nth-child(n+2){ font-size: 1.3em; }

我將所有可能的邊距和填充歸零(在瀏覽器中確認(rèn))。我試圖將父級(jí)的字體大小設(shè)置為0(使文本消失！)跟下面的CSS。

ul{
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 0;
}

我必須手動(dòng)在li上設(shè)置負(fù)值嗎？這似乎不是最佳做法。

你的例子中的布局考慮到了文本可能包含帶有下行字母的字母，比如f、g、q或y。

您可以使用align-items CSS屬性將flex容器中的項(xiàng)目與基線對(duì)齊:

ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  align-items: baseline;
  gap: 1em;
}

li {
  font-size: 1.3em;
}

li:nth-child(1) { font-size: 3.6em; }

li:nth-child(n+2) { font-size: 1.3em; }

<ul>
  <li>Menu</li>
  <li>Start</li>
  <li>Runs</li>
</ul>