如何让我的弹性内容停止换行？答案

【问题标题】：How can I get my flexed content to stop wrapping?如何让我的弹性内容停止换行？
【发布时间】：2019-07-29 02:24:08
【问题描述】：

我想要做的是在名称下滑动导航菜单以实现更小的屏幕尺寸。我的标记是这样的：

    <header>
        <h1>My Name</h1>
        <nav>
            <ul>
                <li>Home</li>
                ...
            </ul>
        </nav>
    </header>

我在标题上有display: flex、flex-direction: row，所以它把h1和nav放在同一行。

当我将视口缩小到执行此操作的程度时，我希望整个导航都落在名称下，而不是换行。如果我将 nowrap 放在两个项目的空白处，导航会向右溢出。

我知道我可以使用媒体查询来翻转它，但我希望它在没有媒体查询的情况下做出响应。我知道这是可能的，但我不能完全正确。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

简短的回答是添加header {flex-wrap: wrap;} 和header ul {dispplay: flex;}，以便<h1> 和<nav> 根据需要换行，但所有<li>s 都不会换行。

header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

header ul {
  list-style: none;
  padding-left: 0;
  display: flex;
}

header li:not(:last-child) {
  margin-right: 1rem;
}

<header>
  <h1>My Name</h1>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Career</li>
      <li>Blog</li>
    </ul>
  </nav>
</header>

【讨论】：