为什么我的弹性项目会从屏幕上包裹起来？

Question

我有一个 flex nav，它向左环绕，部分离开屏幕。有更多经验的人知道可能导致这种情况的原因吗？我不知道为什么会这样。

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

简答

不要在弹性项目边距上使用百分比。使用其他单位，例如px 或em。

revised demo

---

说明

当您将主容器 (.header) 设为弹性容器时，其子容器将成为弹性项目。

这是两个孩子：h1 和 nav（下面添加了红色边框）

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

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

这会导致它们溢出容器。

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

在较小的屏幕上，nav 元素会绕到标题的左边缘，溢出的项目会消失：

如果切换到justify-content: flex-start，右侧的项目会溢出。

---

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

为什么ul 容器不扩展以容纳li 子级？

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

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

作者应避免在 flex 的填充或边距中使用百分比 完全不同的项目，因为它们在不同的浏览器中会有不同的行为。

一旦您在利润上切换到非百分比单位，一切似乎都奏效了。

Answer 2

在您的 CSS 中更改以下内容：

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

Answer 3

只需从媒体查询部分中nav ul 的规则中删除justify-content: flex-end;：

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;
    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/7dubc44L/