为什么 Flex 项目在使用百分比填充时会换行？

为什么应用百分比填充时 Flex 项目会拆分？

考虑一个场景，其中

元素（一个 Flex 项目）包含多个非 Flex
• 元素。元素。当百分比填充应用于
• 时，元素，
  容器跨多行拆分。然而，当使用固定填充时，情况并非如此。

  说明

  当使用百分比填充时，它是相对于包含块的宽度，在这种情况下，

  ul>。问题是由于在确定容器宽度之前无法解决百分比填充的问题。

  如果没有固定填充，浏览器会根据其内容计算

  的宽度。然后应用百分比填充，导致容器变得更宽，不再适合所有的
  • 元素。

  Beispiel

  li {
    display: inline-block;
    padding: 0 5%; /* Percentage padding */
    border: 1px solid black;
  }
  
  header {
    display: flex;
  }
  
  ul {
    border:1px solid red;
  }

  为了更好地说明此行为，请考虑以下代码：

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

  如果我们在控制台中执行以下 JavaScript，我们将可以看到
  的宽度应用填充后：
  这将输出
  的宽度应用百分比填充后。

以上是为什么 Flex 项目在使用百分比填充时会换行？的详细内容。更多信息请关注PHP中文网其他相关文章！