如何使用CSSFlexbox构建网站标题

作者：博饼薄饼 | 来源：互联网 | 2023-09-18 02:56

这篇文章将为大家详细讲解有关如何使用CSSFlexbox构建网站标题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收

这篇文章将为大家详细讲解有关如何使用CSS Flexbox构建网站标题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在 CSS3 没有普及的时候，创建一个网站 header 是一项既可怕又困难的任务 ?。那时，Flexbox 还是个新东西，我们不得不使用老方法，比如 float和clearfix技术。今天，情况完全不同了，Flexbox 得到了广泛的支持，大大的减少了我们的开发工作，同时也为我们提供了更多的可能性。

有人可能会说，现在 CSS3 这么普及，制作一个网站 header 不是很容易么 ?？并非如此，因为有一些有趣的挑战需要解决,在本文中我们会介绍其中的几种。

简介

首先，这里所说的网站 Header 是用户访问网站时首先看到的内容之一。通常，它包含logo或网站名称以及导航链接，如下所示:

如何使用CSS Flexbox构建网站标题

不管 Header 的视觉设计如何，关键元素都是logo 和导航。

Flexbox

当 flexbox 应用于 Header 元素时，它将使所有子项目在同一行中。然后，你所需要做的就是应用justify-content来分配它们之间的间距。

html

  Brand

css

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

很简单，对吧?对于这样的用例，是的，可能会比这更复杂。

Header Wrapper

在上面的 lago 和 nav 外没有包含一层 wrapper，这在大屏幕可能会出现问题。

如何使用CSS Flexbox构建网站标题

从上可以看到第一个Header太宽了，因为它没有内部 wrapper 相比第一个，第二个看起来好多了。所以，我们可以对 HTML 进行如下调整。

flexbox应该移动到.site-header__wrapper元素中。

.site-header__wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

使用 flex-wrap

当屏幕很小的时候，可以水平滚动。见下图

如何使用CSS Flexbox构建网站标题

如果没有设置flex-wrap: wrap，当屏幕过小的时候就会出现水平滚动，如果不想这样，可以加上 flex-wrap: wrap` ?。

Header 的多种形式

我喜欢使用flexbox的原因是它可以很容易地处理 header 设计的多种变化。基于前面的 header 设计，我扩展了 header 元素的一些选项，如添加按钮、搜索输入和更改子项目的顺序。

Header 变化 1

如何使用CSS Flexbox构建网站标题

假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航栏中吗?还是应该和导航分开?我更喜欢这样做。

  
    
    
    Track

这种情况下，我们不能在用 justify-content: space-between来处理间隙，相反，我会在 nav 元素上使用 margin-left: auto，

这样，它就会自动向右靠齐。

如何使用CSS Flexbox构建网站标题

将导航和 track 按钮分开对于移动设备非常有用，因为我们需要保留该按钮并在其旁边显示一个移动切换按钮。

如何使用CSS Flexbox构建网站标题

Header 变化 2

如何使用CSS Flexbox构建网站标题

与第一个变化类似，这个变化增加了一个搜索输入，占用了剩余的可用空间。对于flexbox，这可以通过使用flex属性来实现。

html

.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] */ }