本文已经过原作者 Shadeed 授权翻译。
在 CSS3 没有普及的时候,创建一个网站 header 是一项既可怕又困难的任务 ?。那时,Flexbox 还是个新东西,我们不得不使用老方法,比如 float和clearfix技术。今天,情况完全不同了,Flexbox 得到了广泛的支持,大大的减少了我们的开发工作,同时也为我们提供了更多的可能性。
有人可能会说,现在 CSS3 这么普及,制作一个网站 header 不是很容易么 ??并非如此,因为有一些有趣的挑战需要解决,在本文中我们会介绍其中的几种。
简介首先,这里所说的网站 Header 是用户访问网站时首先看到的内容之一。通常,它包含logo或网站名称以及导航链接,如下所示:
不管 Header 的视觉设计如何,关键元素都是logo 和导航。
Flexbox
当 flexbox 应用于 Header 元素时,它将使所有子项目在同一行中。然后,你所需要做的就是应用justify-content来分配它们之间的间距。
html
- <header class="site-header">
- <a href="#" class="brand">Brand</a>
- <nav class="nav"></nav>
- </header>
css
- .site-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
很简单,对吧?对于这样的用例,是的,可能会比这更复杂。
Header Wrapper
在上面的 lago 和 nav 外没有包含一层 wrapper,这在大屏幕可能会出现问题。
从上可以看到第一个Header太宽了,因为它没有内部 wrapper 相比第一个,第二个看起来好多了。所以,我们可以对 HTML 进行如下调整。
flexbox应该移动到.site-header__wrapper元素中。
- .site-header__wrapper {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
使用 flex-wrap当屏幕很小的时候,可以水平滚动。见下图
如果没有设置flex-wrap: wrap,当屏幕过小的时候就会出现水平滚动,如果不想这样,可以加上 flex-wrap: wrap` ?。
Header 的多种形式
我喜欢使用flexbox的原因是它可以很容易地处理 header 设计的多种变化。基于前面的 header 设计,我扩展了 header 元素的一些选项,如添加按钮、搜索输入和更改子项目的顺序。
Header 变化 1
假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航栏中吗?还是应该和导航分开?我更喜欢这样做。
版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除
本文转载自网络,原文链接:https://mp.weixin.qq.com/s/t_dUyyBGjQ6mKJjRT5GgaA