让我们从一个非常简单的导航栏的标记开始:
<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” ,在不同的浏览器和操作系统上会有不同的效果。
为了让导航栏具备响应式特性,先给搜索框添加一个 css 属性 flex:1。
.search { flex: 1; }
这会使搜索框随着容器宽度的不同自动伸缩,意味着在容器右侧不会再有空余的空间。
如图
你也许会说,让其他的元素宽度固定,只让搜索框随着容器伸缩,这可能导致搜索框比其他元素宽的太多。当然,如果你喜欢,只需要为这些子元素添都添加 css 属性 flex:1,你就可以让所有的子元素都能随容器伸缩。
.container > li { flex: 1; }
效果如图:
还可以为子元素的 flex 属性设置不同的值,这些子元素的伸缩速度会有所不同。你可以自行实验。
在接下来的教程中,我们会接着第一个方案继续下去,也就是说,只有搜索框具有 css 属性 flex:1。
我们的导航栏在宽屏幕上运行正常。然而,在更狭窄的情况下,它会出现问题,正如你在下面看到的那样:
在某一时刻,将所有条目放在同一行上是不可行的,因为容器变得太窄。为了解决这个问题,我们将添加一个媒介查询,它将把我们的四个项目分成两行。当屏幕宽度为 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%,每行将显示两个项目,如下所示:
因此,只要有其中一行不能适应给定宽度的两个条目,我们就不希望存在这类有两个这种宽度的条目的行。换句话说,在非常小的屏幕上,我们希望导航栏变成垂直的,然后将这些条目摞在一起。
为了实现这个目标,我们只需要将我们的 50% 的宽度改为 100%,这样每一行仅能放置一个条目。我们将在 400px 处添加此断点。
@media all and (max-width: 400px) { .container > li { flex-basis: 100%; } .search { order: 1; } }
除了这些,我还喜欢将搜索条目放置在底部,并将其 order 值设置为 1。
结果如下:
评论删除后,数据将无法恢复
评论(0)