FlexBox
英文原文：
How to create a fully responsive navbar with Flexbox
在本文中，我将解释如何使用 Flexbox 以及媒体查询（Media Queries）来创建适应各种屏幕大小的导航栏。
本教程也可以在 Scrimba 上我的免费 Flexbox 课程中找到交互式视频录像。
要阅读更多关于课程，请查看此文章。
设置
让我们从一个非常简单的导航栏的标记开始：
<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>
<ul> 元素是我们的 flex 容器，<li> 元素是我们的 flex 元素。要将其变成 Flexbox 模型布局，我们将执行以下操作：
.container {
display: flex;
}结果将是以下布局：
正如你所见，我们在右边有一些额外空间。 这是因为 Flexbox 从左到右排布了了元素，每个元素的宽度仅为其内容所限的宽度。
由于默认的 flex 容器是块级元素（且比四个元素更宽），所以最后我们得到了间隔。
搜索元素比其他元素宽的原因是因为输入字段默认设置为 size =“20” ，在不同的浏览器和操作系统上会有不同的效果。
响应式特性 #1
为了让导航栏具备响应式特性，先给搜索框添加一个 css 属性 flex:1。
.search {
flex: 1;
}这会使搜索框随着容器宽度的不同自动伸缩，意味着在容器右侧不会再有空余的空间。
如图
你也许会说，让其他的元素宽度固定，只让搜索框随着容器伸缩，这可能导致搜索框比其他元素宽的太多。当然，如果你喜欢，只需要为这些子元素添都添加 css 属性 flex:1，你就可以让所有的子元素都能随容器伸缩。
.container > li {
flex: 1;
}效果如图：
还可以为子元素的 flex 属性设置不同的值，这些子元素的伸缩速度会有所不同。你可以自行实验。
在接下来的教程中，我们会接着第一个方案继续下去，也就是说，只有搜索框具有 css 属性 flex:1。
响应性＃2
我们的导航栏在宽屏幕上运行正常。然而，在更狭窄的情况下，它会出现问题，正如你在下面看到的那样：
在某一时刻，将所有条目放在同一行上是不可行的，因为容器变得太窄。为了解决这个问题，我们将添加一个媒介查询，它将把我们的四个项目分成两行。当屏幕宽度为 600px 时，媒介查询将会启动：
@media all and (max-width: 600px) {
.container {
flex-wrap: wrap;
}
.container > li {
flex-basis: 50%;
}
}首先，我们允许 Flexbox 布局用 flex-wrap 进行包裹。 默认值为 nowrap，所以我们必须把值修改为 wrap。
接下来我们要做的事情是将项目的 flex-basis 值设置为 50％。这告诉 Flexbox 使每个条目占用可用宽度的 50％，每行将显示两个项目，如下所示：
现在我们有两个不同的状态。但是，这种布局仍然不能在非常小的屏幕上工作，如手机屏幕处于纵向模式下的状态。
如果我们继续缩小屏幕，就会像下面的图片一样。
这里发生的情况是，第二行不能再适配两个条目了。
“登出”和“搜索”条目明显太宽了，因为你不能将它们缩小到最小宽度以下，这是他们填充内容所需的宽度。
“主页”和“个人资料”条目仍然能够出现在同一行，所以 Flexbox 将允许他们这样做。这不是最优的，因为我们希望所有的行都以相同的方式处理。
响应性 #3
因此，只要有其中一行不能适应给定宽度的两个条目，我们就不希望存在这类有两个这种宽度的条目的行。换句话说，在非常小的屏幕上，我们希望导航栏变成垂直的，然后将这些条目摞在一起。
为了实现这个目标，我们只需要将我们的 50％ 的宽度改为 100％，这样每一行仅能放置一个条目。我们将在 400px 处添加此断点。
@media all and (max-width: 400px) {
.container > li {
flex-basis: 100%;
}
.search {
order: 1;
}
}除了这些，我还喜欢将搜索条目放置在底部，并将其 order 值设置为 1。
结果如下：
order:1 可以使得搜索项被放置在底部的原因是因为默认情况下 flex 项的值为零，任何具有比它更高的值的条目将被放置在其他条目之后。
为了弄清楚这一切是如何发生的，这里是文章开头的 gif 图：
恭喜！你现在知道如何使用 Flexbox 和媒体查询创建全响应式导航栏了。
如果你有兴趣了解关于 Flexbox 的更多信息，我建议你在 Scrimba 上观看我的免费课程。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。
2KB翻译工作遵照
CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务
