使用CSSFlexbox打造可靠实用的网站页眉

作者：Shadeed译者：前端小智来源：ishadeed再次点赞，微信搜索【大运世界】，B站关注【前端小智】这个没有大厂出身，却有着向上积极的心态。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...在CSS3还没有普及的时候，制作网站header是一件多么可怕又艰巨的事情？。那个时候Flexbox还是个新鲜事物，我们还得用老办法，比如float、clearfix技术。在今天，情况完全不同了，Flexbox得到了广泛的支持，大大减少了我们的开发工作，同时也为我们提供了更多的可能性。可能有人会说，现在CSS3这么流行，做个网站头还不简单吗？？并非如此，因为有一些有趣的挑战需要解决，在本文中我们将介绍其中的一些。简介首先，这里提到的网站标题是用户访问网站时最先看到的内容之一。通常，它包含一个徽标或网站名称和导航链接，如下所示：无论Header的视觉设计如何，关键元素是徽标和导航。Flexbox当flexbox应用于Header元素时，它将使所有子项位于同一行。然后，您需要做的就是应用justify-content来分配它们之间的间距。html品牌css.site-header{显示：弹性；证明内容：空格之间；align-items:center;}很简单，对吧？对于这样的用例，是的，它可能会变得比这更复杂。HeaderWrapper在上面的lago和nav之外没有包含一层wrapper，这在大屏幕上可能会导致问题。从上面可以看出，第一个Header太宽了，因为它没有内包装。与第一个相比，第二个看起来好多了。因此，我们可以对HTML进行如下调整。