网站制作时如何使用Flexbox创建完全响应的导航栏

网站制作将解释如何使用Flexbox以及媒体查询来创建适应各种屏幕大小的导航栏。

设置

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

<nav> 
  <ul class =“container”> 
    <li>Home</ li> 
    <li>Profile</ li> 
    <li class =“search”> 
      <input type =“text”class =“search-input” =“Search”> 
    </ li> 
    <li>Logout</ li> 
  </ ul> 
</ nav>

该<ul>元素是我们的柔性容器和<li>元素是我们的柔性物品。要将它变成Flexbox布局，我们将执行以下操作：

.container { 
  display：flex; 
}

这将导致以下布局：

正如你所看到的，我们在右侧有一些额外的空间。这是因为Flexbox列出了从左到右的项目，并且每个项目只有其内容强制的宽度。

由于默认的flex容器是块级元素（并且比四个项目宽），所以我们得到了最后的差距。

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

响应能力＃1

为了让我们的导航条具有基本的响应能力，我们将简单地给搜索项赋予1的弹性值。

.search { 
  flex：1; 
}

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

尽管在搜索项目增长而其他项目保持不变的情况下有意义，但您可能会认为与其他项目相比，它可能会变得太宽泛。因此，如果您希望所有项目都与容器的宽度一起增长，则可以简单地将所有项目的flex值设为1。

.container> li { 
  flex：1; 
}

这是如何发挥出来的：

您还可以为这些项目提供不同的弹性值，这将使它们以不同的速度增长。随意在这个Scrimba游乐场中进行实验。

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

响应能力＃2

我们的导航栏在宽屏幕上运行良好。然而，在更狭窄的问题上，它会遇到问题，正如你在这里看到的那样：

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

@media all和（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和（max-width：400px）{. 
  container> li { 
    flex-basis：100％; 
  } 
  .search { 
    order：1; 
  } 
}

除此之外，我希望将搜索项放置在底部，这就是为什么我还将搜索定位到order1 并将其值设为1。

这导致以下结果：

原因order: 1;导致搜索项目被放置在底部是因为默认情况下弹性项目的值为零，并且任何项目具有比其更高的值将被放置在其他项目之后。

为了看看它是如何发挥出来的，这里是文章顶部的gif：

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