如何用 Flexbox 构建一个响应式导航栏 已翻译 100%

oschina 投递于 2018/01/31 16:25 (共 7 段, 翻译完成于 02-05)
阅读 1635
收藏 22
3
加载中

在本文中,我将解释如何使用 Flexbox 以及媒体查询(Media Queries)来创建适应各种屏幕大小的导航栏。

本教程也可以在 Scrimba 上我的免费 Flexbox 课程中找到交互式视频录像。

要阅读更多关于课程,请查看文章。

Tocy
Tocy
翻译于 2018/01/31 16:36
0

设置

让我们从一个非常简单的导航栏的标记开始:

<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” ,在不同的浏览器和操作系统上会有不同的效果。

AndyLam
AndyLam
翻译于 2018/02/01 02:31
1

响应式特性 #1

为了让导航栏具备响应式特性,先给搜索框添加一个 css 属性 flex:1。

.search {
  flex: 1;
}

这会使搜索框随着容器宽度的不同自动伸缩,意味着在容器右侧不会再有空余的空间。

如图

你也许会说,让其他的元素宽度固定,只让搜索框随着容器伸缩,这可能导致搜索框比其他元素宽的太多。当然,如果你喜欢,只需要为这些子元素添都添加 css 属性 flex:1,你就可以让所有的子元素都能随容器伸缩。

.container > li {
  flex: 1;
}

效果如图:

还可以为子元素的 flex 属性设置不同的值,这些子元素的伸缩速度会有所不同。你可以自行实验

在接下来的教程中,我们会接着第一个方案继续下去,也就是说,只有搜索框具有 css 属性 flex:1。

隐性精神病人
隐性精神病人
翻译于 2018/02/05 16:09
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%,每行将显示两个项目,如下所示:

凉凉_
凉凉_
翻译于 2018/02/01 10:27
0

现在我们有两个不同的状态。但是,这种布局仍然不能在非常小的屏幕上工作,如手机屏幕处于纵向模式下的状态。

如果我们继续缩小屏幕,就会像下面的图片一样。

这里发生的情况是,第二行不能再适配两个条目了。

“登出”和“搜索”条目明显太宽了,因为你不能将它们缩小到最小宽度以下,这是他们填充内容所需的宽度。

“主页”和“个人资料”条目仍然能够出现在同一行,所以 Flexbox 将允许他们这样做。这不是最优的,因为我们希望所有的行都以相同的方式处理。

Tocy
Tocy
翻译于 2018/02/01 11:09
0

响应性 #3

因此,只要有其中一行不能适应给定宽度的两个条目,我们就不希望存在这类有两个这种宽度的条目的行。换句话说,在非常小的屏幕上,我们希望导航栏变成垂直的,然后将这些条目摞在一起。

为了实现这个目标,我们只需要将我们的 50% 的宽度改为 100%,这样每一行仅能放置一个条目。我们将在 400px 处添加此断点。

@media all and (max-width: 400px) {
  .container > li {
    flex-basis: 100%;
  }
  .search {
    order: 1;
  }
}

除了这些,我还喜欢将搜索条目放置在底部,并将其 order 值设置为 1。

结果如下:

Tocy
Tocy
翻译于 2018/02/01 09:39
0

order:1 可以使得搜索项被放置在底部的原因是因为默认情况下 flex 项的值为零,任何具有比它更高的值的条目将被放置在其他条目之后。

为了弄清楚这一切是如何发生的,这里是文章开头的 gif 图:

恭喜!你现在知道如何使用 Flexbox 和媒体查询创建全响应式导航栏了。

如果你有兴趣了解关于 Flexbox 的更多信息,我建议你在 Scrimba 上观看我的免费课程。

Tocy
Tocy
翻译于 2018/01/31 16:41
0
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
加载中

评论(0)

返回顶部
顶部