使用CSSFlexbox打造可靠实用的网站页眉
时间：2023-03-15 08:54:08
科技观察
本文已获得原作者Shadeed授权翻译。在CSS3还没有普及的时候，创建网站标题是一项可怕而艰巨的任务。那个时候Flexbox还是个新鲜事物，我们还得用老办法，比如float、clearfix技术。在今天，情况完全不同了，Flexbox得到了广泛的支持，大大减少了我们的开发工作，同时也为我们提供了更多的可能性。可能有人会说，现在CSS3这么流行，做个网站头还不简单吗？？不一定，因为有一些有趣的挑战需要解决，我们将在本文中介绍其中的一些。简介首先，这里提到的网站标题是用户访问网站时最先看到的内容之一。通常，它包含一个徽标或网站名称和导航链接，如下所示：无论Header的视觉设计如何，关键元素是徽标和导航。Flexbox当flexbox应用于Header元素时，它将使所有子项位于同一行。然后，您需要做的就是应用justify-content来分配它们之间的间距。html品牌css.site-header{display:flex;justify-content:space-between;align-items:center;}够简单吧？对于这样的用例，是的，它可能会变得比这更复杂。HeaderWrapper在上面的lago和nav之外没有包含一层wrapper，这在大屏幕上可能会导致问题。从上面可以看出，第一个Header太宽了，因为它没有内包装。与第一个相比，第二个看起来好多了。因此，我们可以对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`?。多种形式的标题我喜欢使用flexbox的原因是它可以轻松处理标题设计的多种变体。基于之前的页眉设计，我对页眉元素进行了扩展，添加了一些选项，例如添加按钮、搜索输入和更改子项的顺序。HeaderVariation1假设我想在导航链接旁边添加一个按钮。这应该如何处理？我们应该将它添加为导航栏中的链接吗？还是应该与导航分开？我更喜欢这个。在这种情况下，我们不能再使用justify-content:space-between来处理间隙。相反，我将在nav元素上使用margin-left:auto，这样它会自动向右对齐。将导航和跟踪按钮分开对于移动设备很有用，因为我们需要保留该按钮并在其旁边显示一个移动切换按钮。标头变体2与第一个变体类似，这个变体添加了一个搜索输入，占用了剩余的可用空间。对于flexbox，这可以通过使用flex属性来实现。html
