css flexbox模型_Flexbox教程：了解如何使用CSS Flexbox编写响应式导航栏

css flexbox模型

In this article, I’ll explain how to create a navbar which adapts to various screen sizes using Flexbox along with media queries.

在本文中，我将解释如何使用Flexbox和媒体查询来创建适应各种屏幕尺寸的导航栏。

This tutorial can also be found as an interactive screencast in my free Flexbox course at Scrimba.

也可以在我在Scrimba的免费Flexbox课程中以交互式屏幕录像的形式找到本教程。

To read more about the course, check out this article.

要了解更多有关课程，看看这个文章。

设置 (The setup)

Let’s begin with the markup for a very simple navbar:

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

<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>

The <ul> element is our flex container and the <li> elements are our flex items. To turn it into a Flexbox layout we’ll do:

<ul>元素是我们的flex容器，而<li>元素是我们的flex项。要将其转换为Flexbox布局，我们将执行以下操作：

.container {  display: flex;  
}

Which will result in the following layout:

这将导致以下布局：

I’ve added some styling, but that has nothing to do with Flexbox.

我添加了一些样式，但这与Flexbox无关。

As you can see, we have a bit of extra space on the right-hand side. This is because Flexbox lays out the items going from left to right, and each item is only as wide as its content forces it to be.

如您所见，右侧有一些额外的空间。这是因为Flexbox将从左到右排列项目，并且每个项目的宽度仅取决于其内容的大小。

Since the flex container by default is a block level element (and is wider than the four items) we get the gap at the end.

由于默认情况下，flex容器是一个块级元素(并且比这四个元素还要宽)，因此我们在最后得到了差距。

The reason the search items is wider than the others is because input fields are by default set to size="20", which different browsers and operating systems interpret in different ways.

搜索项之所以比其他项宽，是因为默认情况下将输入字段设置为size="20" ，不同的浏览器和操作系统以不同的方式解释输入字段。

响应度1 (Responsiveness 1)

To give our navbar basic responsiveness, we’ll simply give the search item a flex value of 1.

为了使我们的导航栏具有基本的响应能力，我们只需将搜索项的flex值设为1。

.search {  flex: 1;  
}

This results in the search item expanding and shrinking with the width of the container, meaning we won’t get the extra space in the right-hand side.

这导致搜索项随着容器的宽度而扩大和缩小，这意味着我们将不会在右侧获得额外的空间。

While it makes sense to have the search item grow while the others stay fixed, you could argue that it can become too wide compared to the others. So if you prefer to have all the items grow with the width of the container instead, you can simply give all the items a flex value of 1.

虽然使搜索项增长而其他项保持固定是有意义的，但您可以辩称，与其他项相比，搜索项可能变得太宽。因此，如果您希望所有项目都随容器的宽度而增长，则只需将所有项目的flex值设为1。

.container > li {  flex: 1;  
}

Here’s how that plays out:

播放结果如下：

You can also give the items different flex values, which would make them grow with different speeds. Feel free to experiment with that in this Scrimba playground.

您还可以为项目指定不同的flex值，这将使它们以不同的速度增长。可以在此Scrimba游乐场中随意尝试。

For the rest of the tutorial, we’ll continue with the first solution, where the search items are the only one with a flex value.

在本教程的其余部分中，我们将继续第一个解决方案，其中搜索项是唯一具有flex值的项。

响应能力2 (Responsiveness 2)

Our navbar works well on wide screens. However, on more narrow ones it gets into problems, as you can see here:

我们的导航栏可在宽屏幕上正常运行。但是，在更狭窄的范围内会遇到问题，如您在此处看到的：

At some point, it’s not viable to have all items on the same row, as the container becomes too narrow. To solve this we’ll add a media query where we’ll split our four items into two rows. The media query will kick when the screen is 600px wide:

在某些时候，将所有项目都放在同一行是不可行的，因为容器变得太狭窄。为了解决这个问题，我们将添加一个媒体查询，将四个项目分为两行。当屏幕为600像素宽时，媒体查询将启动：

@media all and (max-width: 600px) {  .container {  flex-wrap: wrap;  }  .container > li {  flex-basis: 50%;  }}

First, we allow the Flexbox layout to wrap with flex-wrap. This is by default set to nowrap, so we’ll have to change it to wrap.

首先，我们允许Flexbox布局用flex-wrap 。默认情况下，它被设置为nowrap ，因此我们必须对其进行wrap 。

The next thing we do it set the items’ flex-basis value to 50%. This tells Flexbox to make each item take up 50% of the available width, which results in two items per row, like this:

接下来，我们将商品的flex-basis值设置为50％。这告诉Flexbox使每个项目占用可用宽度的50％，这导致每行有两个项目，如下所示：

Note: I’ve also centred the placeholder text in the search input field.

注意：我还将占位符文本放在搜索输入字段的中心。

Now we have two different states. However, this layout still doesn’t work on very small screens, like mobile screens in portrait mode.

现在我们有两个不同的状态。但是，此布局仍然无法在非常小的屏幕上使用，例如纵向模式下的移动屏幕。

If we continue shrinking the screen, it’ll end up like the image below.

如果我们继续缩小屏幕，它将最终像下图所示。

What’s happened here is that the second row can’t fit two items anymore.

这里发生的是第二行不能再容纳两个项目。

The logout and the search items are simply too wide, as you can’t shrink them down to below their minimum width, which is the width they need in order to fill the content inside of them.

注销和搜索项太宽了，因为您不能将它们缩小到其最小宽度以下，这是它们填充内部内容所需的宽度。

The home and profile items are still able to appear on the same row though, so Flexbox will allow them to do so. This isn’t optimal, as we want all of our rows to behave in the same way.

尽管首页和个人资料项目仍然可以显示在同一行中，所以Flexbox允许它们这样做。这不是最佳选择，因为我们希望所有行的行为都相同。

响应能力3 (Responsiveness 3)

So as soon as one of the rows can’t fit two items in the width, we want none of the rows to have two items in the width. In other words, on very small screens we’ll actually make navbar vertical. We’ll stack the items on top of each other.

因此，只要其中一行不能容纳两个宽度的项目，我们就不希望任何行具有两个宽度的项目。换句话说，在很小的屏幕上，我们实际上会将导航栏设置为垂直。我们将各个项目堆叠在一起。

To achieve this we simply need to change our 50% width to 100%, so that each row only fits a single item. We’ll add this breakpoint at 400px.

为此，我们只需要将50％的宽度更改为100％，以便每行仅适合一个项目。我们将在400px处添加此断点。

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

In addition to this, I’d like to place the search item at the bottom, which is why I’m also targeting the search and give it an order value of 1.

除此之外，我想将搜索项放在底部，这就是为什么我也以搜索为目标并为其赋予order值1的原因。

This results in the following:

结果如下：

The reason order: 1; results in the search item being placed at the bottom are because flex items by default have a value of zero, and whatever item has a higher value than that will be placed after the others.

原因order: 1; 之所以将搜索项放置在底部，是因为弹性项默认情况下的值为零，而任何具有比其他项更高的值。

To see how it all plays out, here’s the gif from the top of the article:

要查看其效果如何，请参见文章顶部的gif：

Congrats! You now know how to create a fully responsive navbar using Flexbox and media queries.

恭喜！现在，您知道如何使用Flexbox和媒体查询创建完全响应的导航栏。

If you’re interested in learning more about Flexbox, I’d recommend you to check out my free course at Scrimba.

如果您有兴趣了解有关Flexbox的更多信息，建议您阅读Scrimba的免费课程。

Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

谢谢阅读！我叫Per Borgen，我是Scrimba的共同创始人–学习编码的最简单方法。如果要学习以专业水平构建现代网站，则应查看我们的响应式Web设计新手训练营。