网站制作时如何使用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无关。 正如你所看到的,我们在右侧有一些额外的空间。这是因为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和媒体查询创建完全响应的导航栏。

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站制作时如何使用Flexbox创建完全响应的导航栏
分享到:
赞(0)
广告位820*80