意外的填充行为 - Flexbox答案

【问题标题】：Unexpected Padding Behaviour - Flexbox意外的填充行为 - Flexbox
【发布时间】：2018-01-03 01:56:41
【问题描述】：

我有一个简单的导航元素，它将与页脚一起放在页面上。

当我向这个项目添加填充时，元素会按规定的填充量缩小。

通常，当您向元素添加填充时，它不会缩小实际元素。我知道box-sizing: border-box 确保填充包含在总宽度中，但我已将宽度设为父宽度的 100%。

页眉或页脚元素没有发生同样的问题。

这里真的很困惑。

Codepen：https://codepen.io/emilychews/pen/opZjEr

/* NAV ABOVE FOOTER */

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

#footer-nav {
  position: relative;
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
}

ul#footer-nav-items {
  margin: 0;
  padding: 1rem 1rem 1rem 0;
  display: flex;
  justify-content: flex-start;
  background: yellow;
}

ul#footer-nav-items li {
  list-style-type: none;
  padding-right: 1.44rem;
}

<nav id="footer-nav">
  <ul id="footer-nav-items">
    <li class="footer-menu-item">Home</li>
    <li class="footer-menu-item">Privacy / Terms</li>
    <li class="footer-menu-item">Contact</li>
  </ul>
</nav>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

导航元素不会随着您的填充而缩小。它仍然是width: 100%。

也许您是根据黄色背景颜色来判断导航元素的宽度。

请记住，黄色背景应用于ul 而不是nav 元素。

【讨论】：