为什么百分比的padding会破坏我的flex子元素？

Question

我有一个弹性项目 <ul> 元素。这个 <ul> 包含几个不是弹性项目的 <li> 元素。 当我给 <li> 元素添加百分比的 padding 时，<ul> 元素就会像图片中那样分成几行: 当我设置固定的 padding（如30px）时，<ul> 元素在一行中显示: 所以，我的问题是：为什么百分比的 padding 会导致 <ul> 表现出这种方式？ P.S：我不需要解决方案来修复它，我只需要一个解释行为的说明。

li {
  display: inline-block;
  padding: 0 5%;
  /* padding: 0 30px; */
  border: 1px solid black;
}

header {
  display: flex;
}

ul {
  border:1px solid red;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

- Roman Roman

---

类似于CSS网格的情况：https://stackoverflow.com/questions/53355708/css-grid-unnecessary-word-break/53355848#53355848。基本上（根据我的分析），百分比填充被后考虑，因此它们会减小最初计算的宽度。 - Temani Afif

@Jeremy，看到这里flexbox，尝试使用px而不是%来设置padding，行为会有所不同。问题只出现在使用%时。 - Temani Afif

@TemaniAfif哦，我没意识到，只是盲目地遵循了那篇帖子。 - Jeremy

Answer 1

正如我在之前的一个类似情况的链接中所解释的，这里涉及到一种复杂的计算。与百分比值一起使用的填充将相对于包含块的宽度^引用，逻辑上包含块的宽度将由其内容（或任何固定宽度值）定义。

在我们的情况下，在计算宽度之前无法解析填充的百分比值，因此我们首先根据我们的内容计算宽度以获得这个结果：

console.log(document.querySelector('ul').offsetWidth);

li {
  display: inline-block;
  border: 1px solid black;
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:0;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

然后，我们将考虑上述计算出的宽度以计算填充量。

接着，填充逻辑上会被添加到宽度上，这将增加总体宽度并创建换行。浏览器不会返回重新计算 ul 的宽度，因为我们将有一个循环，所以计算只会进行一次。

console.log(document.querySelector('ul.pad').offsetWidth);

li {
  display: inline-block;
  border: 1px solid black;
}
.pad li {
  padding:0 0.5%; /*any small value will create the issue*/
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:5px;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>
<header>
  <ul class="pad">
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

我们可以清晰地看到，在这两种情况下，ul 的宽度完全相同。

这不会发生在像素值中，因为它们是绝对值，浏览器可以将其包含在初始计算中。

li {
  display: inline-block;
  border: 1px solid black;
}
.pad li{
  padding:0 30px; 
}

header {
  display: flex;
}

ul {
  border:1px solid red;
  margin:0;
  padding:0;
}

<header>
  <ul>
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>
<header>
  <ul class="pad">
    <li>Library</li>
    <li>Telegram channel</li>
    <li>Contacts</li>
    <li>Donate</li>
  </ul>
</header>

- Temani Afif

---

这不是一个 UL，而是一个包含文章的部分。现在，我发现网格父元素和网格子元素的大小不同，我不知道为什么。 - Jesús Bohorquez