html - 为什么我的 flex 元素会超出屏幕？

Question

我有一个 flex 导航，它向左环绕并部分脱离屏幕。有更多经验的人知道这可能是什么原因造成的吗？我不明白为什么要这样做。

header {
  background-color: rgba(255, 165, 0, .8);
  border-bottom: 12px solid black;
  display: flex;
  flex-flow: row wrap;
  align-content: center;
}

header h1 {
  text-align: center;
  margin: 0;
  padding: 15px;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
  border: 8px solid black;
}

header h1,
nav a {
  font-weight: 700;
  font-family: arial;
}

header nav {
  display: none;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  text-align: center;
  margin: 1px;
  border: 1px solid white;
  border-radius: 15px;
}

a {
  text-decoration: none;
}

a:visited,
a,
h1 {
  color: white;
}

@media screen and (min-width: 400px) {
  header {
    height: 120px;
    display: flex;
    justify-content: space-between;
  }
  header h1 {
    margin: 0 0 0 8%;
    font-size: 2em;
    align-self: flex-start;
    white-space: nowrap;
  }
  header nav {
    display: block;
    align-self: flex-end;
  }
  nav ul {
    display: flex;
    justify-content: flex-end;
    margin: 0 8% 0 0;
  }
  nav ul li {
    border-radius: 8px;
    padding: 5px;
    margin: 4px 1%;
    font-size: 1.5rem;
  }
  .characters:hover {
    position: relative;
    border-radius: 8px 8px 0 0;
  }
  .drop-menu {
    position: absolute;
    display: none;
    top: 38px;
    white-space: nowrap;
    left: 0;
    background-color: rgba(255, 165, 0, .8);
    border: 1px solid rgba(0, 0, 0, .02);
    box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
  }
  .characters:hover .drop-menu {
    display: block;
  }
  .drop-menu li {
    margin: 0;
    border-radius: 0;
  }
  footer nav {
    display: none;
  }
}

<header>
  <h1>Seraph Chronicles</h1>
  <nav>
    <ul class="main-nav">
      <li class="main-nav-item"><a href="index.html">Home</a></li>
      <li class="main-nav-item"><a href="about.html">About</a></li>
      <li class="main-nav-item characters">
        <a href="characters.html">Characters</a>
        <ul class="drop-menu">
          <li><a href="ethanClarke.html">Ethan Clarke</a></li>
          <li><a href="serenaKiriaga.html">Serena Kiriaga</a></li>
          <li><a href="MarcusFlynn.html">Marcus Flynn</a></li>
          <li><a href="EmilyAshdown.html">Emily Ashdown</a></li>
          <li><a href="MilesWest.html">Director Miles West</a></li>
        </ul>
      </li>
      <li class="main-nav-item"><a href="auther.html">Author</a></li>
    </ul>
  </nav>
</header>

https://jsfiddle.net/ca75sqzc/17/

Answer 1

简短回答

不要在 flex 元素边距上使用百分比。使用其他单位，例如 px 或 em。

revised demo

---

说明

当您将主容器 (.header) 设为 Flex 容器时，其子容器将成为 Flex 元素。

这是两个子项:h1 和 nav(下面添加了红色边框)

每个导航项 (li) 都有水平边距(每边 1%)。

nav ul li{
   border-radius: 8px;
   padding: 5px;
   margin: 4px 1%;
   font-size: 1.5rem;
}

这会导致它们溢出容器。

然后，因为容器有 justify-content: flex-end，所以元素与容器的右边缘对齐。这意味着溢出发生在左侧(见上图)。

在较小的屏幕上，导航元素会环绕到标题的左边缘，溢出的元素将消失在 View 中:

如果切换到 justify-content: flex-start，元素会溢出到右侧。

---

但是真正的问题实际上是这样的:

Why isn't the ul container expanding to accommodate the li children?

答案似乎是使用百分比作为水平边距。

nav ul {
   display: flex;
   justify-content: flex-end;
   margin: 0 8% 0 0;
}

nav ul li {
   border-radius: 8px;
   padding: 5px;
   margin: 4px 1%;
   font-size: 1.5rem;
}

容器无法识别边缘的该单元，因此不会扩展。

请注意 flexbox spec recommends against using percentage margins and padding on flex items .

4.2. Flex Item Margins and Paddings

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

一旦您在边距上切换到非百分比单位，一切似乎都会正常。