作者：Shadeed
译者：前端小智
起源：ishadeed
点赞再看，微信搜寻【大迁世界】关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588... 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。
github 地址：https://github.com/qq44924588...
在 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 进行如下调整。
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> </div></header>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
假如我想要在导航链接旁边增加了一个按钮。这应该如何解决?咱们应该把它作为链接增加到导航栏中吗?还是应该和导航离开?我更喜爱这样做。
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> <a href="/track-shipment" class="button">Track</a> </div></header>这种状况下，咱们不能在用 justify-content: space-between来解决间隙，相同，我会在 nav 元素上应用 margin-left: auto，
这样，它就会主动向右靠齐。
将导航和 track 按钮离开对于挪动设施十分有用，因为咱们须要保留该按钮并在其旁边显示一个挪动切换按钮。
Header 变动 2
与第一个变动相似，这个变动减少了一个搜寻输出，占用了残余的可用空间。对于flexbox，这能够通过应用flex属性来实现。
html
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <div class="search"></div> <nav class="nav"></nav> <a href="/track-shipment" class="button">Track</a> </div></header>css
.search { flex: 1;}当初，搜寻输出将填充 brand 和nav 之间的可用空间。 然而，这有一些限度。 在较小的视口上，header 将如下所示:
搜寻输出宽度不应小于此宽度，因为这样很难输出和查看全文。 上面有两种解决方案：
我更喜爱第二种解决方案，因为它不会过早暗藏导航。 一般来说，如果元素不影响布局，我会尽量避免暗藏它。
Header 变动 3
对于这个示例，HTML标记是雷同的，然而 header 里的元素程序是不同的。咱们如何能力做到这一点? 你可能想到用 order 属性来解决这个问题 ?
html
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> <a href="/track-shipment" class="button">Track</a> </div></header>css
.site-header { display: flex; justify-content: space-between;}.nav { order: -1;}这样有个问题，距离空间不会使 logo 居中，它只是扩散我的项目之间的空间。
解决方案是给每个子项一个flex: 1，这将在它们之间调配可用空间。
.brand,.nav,.button { flex: 1;}这样，因为flex: 1，按钮元素变宽了， 解决此问题的惟一办法是将其包裹到另一个元素中。
HTML
<header class="site-header"> <div class="wrapper site-header__wrapper"> <a href="#" class="brand"><img src="logo.svg" alt="brand" /></a> <nav class="nav"></nav> <div class="button-wrapper"> <a href="/track-shipment" class="button">Track</a> </div> </div></header>这样，咱们就能够将上面的logo和按钮居中。
.logo { text-align: center;}/* 不要介意这里的命名，这只是出于演示*/.button-wrapper { text-align: end; /* end 等同于LTR语言中的right */}然而，如果增加了更多导航链接，这种办法很容易失败。咱们须要确保导航链接的数量不会超过特定的限度。上面一个logo偏离核心的例子 ?:
正如在上图中看到的，logo没有居中。所以要记住这一点，以防止这种意想不到的问题 ?。
应用 Flexbox 构建 Header 的有用技巧
flex-basis
如果某个元素须要在挪动设施上占据整个宽度（不能暗藏的重要导航），我会应用flex-basis: 100% ?。
从下面的模型看，做起来可能很简略。 实际上不是。 通常，header 可能有一个外部间距（padding），当咱们强制某项占据全副宽度时，除非革除padding ，否则它不会失效。 然而，删除padding不切实际，因为它将影响设计中的其余元素 ?。
上面解决此问题的一种解决办法 ?：
- 将
flex: 1 0 100%增加到导航元素。 - 如有须要，请更改其
order。 有时，可能还有其余元素，咱们想确保导航是最初一个。 - 加上一个等于宽度等于
padding的负margin，这也会让导航占据整个宽度。 - 在导航中增加 padding，这会减少一些适当的空间。
- 最初，应用了
justify-content: center将导航项居中（不重要）
.nav { flex: 1 0 100%; /* [1] */ order: 2; /* [2] */ margin: 1rem -1rem -1rem -1rem; /* [3] */ padding: 1rem; /* [4] */ display: flex; /* [5] */ justify-content: center; /* [5] */}间距
着 Chrome 和 Firefox 反对flex gap属性，当初在flex我的项目之间增加间距比以往任何时候都容易。思考以下题目
要做到上图的高亮间距，只需将gap: 1rem增加到flex父节点。没有了gap，咱们还是须要用旧的形式来距离 ?。
/* 老的形式 */.brand { margin-right: 1rem;}.sign-in { margin-right: 1rem;}/* 新的形式 */.site-header { /* Other flexbox styles */ gap: 1rem;}代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。
原文：https://ishadeed.com/article/...
交换
文章每周继续更新，能够微信搜寻「 大迁世界 」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送Star和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。