Clever Geek Handbook

使用CSS Flexbox设计网站标题

当我在2014年学习HTML和CSS的基础知识后开始开发网站时，对我来说最困难也是最令人恐惧的事情是创建其标头。 Flexbox那时还很新，所以我们不得不使用浮点定位和clearfix技术等旧技术。今天，前端开发的世界已经完全改变。即，Flexbox技术已经获得了广泛的浏览器支持，这为我们打开了许多新的可能性。 有人可能会说，由于我们拥有开发页面布局的现代CSS技术，今天创建网站的标题部分比过去要容易得多。但实际上并非如此。如今，在设计页面布局时，您必须解决棘手且有趣的问题。我将在本文中讨论其中的一些。











即，这里我将向您展示如何使用Flexbox布局为网站创建高质量的标题。我将分享一些技巧，最后，我将演示专门为此材料创建的项目。因此，如果您真的对我决定在此处提出的主题感兴趣，那么您绝对应该阅读这篇文章。



在这里，我假设您了解Flexbox布局的基础知识。以防万一，这里是为那些想了解更多有关CSS属性的人写的文章flex。



介绍



首先，让我们确保您和我称“网站标题”或“网站标题”为同一事物。站点标题是用户访问站点时首先看到的页面元素之一。它通常包含站点的徽标或名称，以及导航链接。看下图。





网站徽标，导航链接和标头部件容器



无论网站标头部件的设计如何，其关键元素都是徽标和链接列表。



Flexbox技术的应用



使用Flexbox技术创建网站标题的布局时，同一级别上的所有项目都排成一行。然后剩下的就是使用该属性justify-content通过在元素之间分配可用空间来对齐它们。



这是标记代码： 



<header class="site-header">
  <a href="#" class="brand">Brand</a>
  <nav class="nav"></nav>
</header>


以下是样式： 



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


一点也不复杂，对吧？好吧，对于这样一个简单的标题。但实际上，情况可能要复杂得多。



页面标题容器



上一节中描述的页面标题标记不包含内部容器元素，该内部容器元素包含表示徽标和导航链接的元素。在大屏幕上，使用此布局可能会出现问题。





不使用内部容器（上方）和使用容器（下方）而创建的页面标题布局，



请注意，第一个页面标题太宽，因为创建内部容器时未使用内部容器。但是第二种布局看起来要好得多。因此，上一示例的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>


而且flex样式需要应用于元素.site-header__wrapper： 



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


使用flex-wrap属性



属性flex-wrap是一种CSS安全机制。如果屏幕较小，则可能必须使用水平滚动才能处理页面的页眉部分。这就是它的样子。





要使用页面标题，您需要使用水平滚动。事实是，这里不使用flex-wrap属性：wrap



如您所见，使用这样的页面将很不方便。因此，不要忘记该物业flex-wrap！



探索页面标题部分的不同布局选项



我喜欢Flexbox布局的原因是，它们使支持页眉部分的不同设计选项变得更加容易。在本节中，基于上面的示例，我将探索通过向布局添加新元素（例如按钮和搜索字段）来扩展布局的可能性。我立即想探索改变页面标题的子项的显示顺序的方法。



▍变数1





页面标题部分的第



一个版本在此布局中添加了一个按钮，该按钮位于导航链接块之后。怎么做？我是否需要将其格式化为放置在元素内部的链接<nav>？还是应该将其作为单独的元素？我会那样做。



这是我的想法的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>


在这种情况下，无法使用property设置元素之间的距离justify-content: space-between。相反，我将使用属性来对齐links块margin-left: auto。这会将链接和按钮推到容器的右侧。





借助margin-left：auto将元素压到容器的右侧，将



按钮与链接块分开对于移动布局非常有用，例如，您可能需要离开按钮并将链接块作为下拉菜单显示。





台式机和移动设备上的页面标题



▍选项2





页面标题部分的第二版在



这里，我们通过向页面标题部分添加搜索字段来扩展了页面标题部分的功能。在页面上放置其他元素后，它将占用剩余的可用空间。使用Flexbox布局，可以通过应用属性来实现flex。



这是标记： 



<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>


这是应用于搜索框的样式： 



.search {
  flex: 1;
}


就这样！现在，该字段将填充徽标和链接块之间的空白区域。但是，这种方法有一些局限性。在小屏幕上，页面的标题如下所示。





小屏幕上的页面标题



搜索字段的宽度不得小于特定大小。否则，将很难在其中输入文本。下面是解决此问题的几种方法。





解决由于减小小屏幕上的搜索字段的宽度而导致的问题，



我更喜欢第二个选项，因为使用它时，链接块不会被过早隐藏。总的来说，我可以说在不干扰布局的正确显示的情况下，我努力不隐藏该元素。



▍选件3





标题部分的第三个版本



这与标题的第一个版本相同的标记。但是，此处在屏幕上显示元素的顺序已更改。怎么做？您可以决定在此处使用该属性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>


以下是样式： 



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

.nav {
  order: -1;
}


这就是渲染所有这些结果的结果。





使用justify-content：space-between属性不会使徽标与中心对齐。此属性仅在元素之间分配可用空间，



解决此问题的方法是使用property将每个子元素分配给页面的页眉flex: 1。这将在元素之间分配空间。



以下是样式： 



.brand,
.nav,
.button {
  flex: 1;
}




页面标题部分的元素之间的可用空间均匀分布



但是，按钮发生了一些奇怪的事情。由于该属性的应用flex: 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>
    <div class="button-wrapper">
      <a href="/track-shipment" class="button">Track</a>
    </div>
  </div>
</header>


使用这种方法，您可以使徽标和按钮居中对齐： 



.logo {
  text-align: center;
}

/*      .  -  ,    ,           . */
.button-wrapper {
  text-align: end; /* end - ,  LTR-,   ,   right */
}




对齐元素



但是，这种方法也不理想。请记住，如果导航块中有更多链接，则会导致问题。即，在此，导航块的宽度必须不超过一定大小。这是徽标失去中心对齐的示例。





徽标不再居中，



如您所见，在上一张图片中，徽标不再居中。值得记住的是上述方法的此功能，以免遇到意外问题。



现在，我们已经探索了用于设计网站标题布局的不同选项，并讨论了如何创建此类布局，下面让我们看一下在为页面创建标题部分时可以帮助我们的一些重要思想。



基于Flexbox的页面的页眉设计提示



flex弹性基础属性



flex-basis: 100%当元素在移动设备上需要为全角时， 我更喜欢使用属性。例如，如果我们谈论的是无法隐藏的重要导航链接块。





应用flex-basis属性的结果是100％



应用该属性，如果您看一下前面的图，可能看起来很简单。实际上，情况并非如此。通常，网站的标题可以具有填充，如果我们调整元素以填充整个宽度，则只有在填充重叠时才会发生这种情况。但是，删除它们是不切实际的，因为这会影响布局的其他元素。



解决此问题的方法如下：



  1. 让我们添加flex: 1 0 100%到导航块中。
  2. 让我们在必要时更改其属性order。有时我们还必须照顾其他元素，因此我们需要确保导航框是最后一个元素。
  3. 让我们使用等于内部边距大小的负值来调整导航块的边距。这将使该块填满页面的整个宽度。
  4. 让我们调整填充以使元素中有一些“空气”。
  5. 最后，我们将使用属性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浏览器支持该属性gap，调整弹性项目之间的间距非常容易。看一下页面的下一个标题部分。





使用gap属性



为了调整图中所选项目之间的距离，您需要向父flex项目添加一个属性gap: 1rem。如果不使用此属性，则必须以相同的方式设置元素的样式。 



/*   */
.brand {
  margin-right: 1rem;
}

.sign-in {
  margin-right: 1rem;
}

/*   */
.site-header {
  /*  flexbox-*/
  gap: 1rem;
}


如果使用属性gap，请记住，如果在查看页面的浏览器不支持的情况下，则需要进行准备和后备。我写了一篇详细的文章。



对话到此结束，但是在我们分开之前，让我向您展示我的一个项目。



Headers-css项目



这是在headers-css项目中创建的页面标题的示例。





来自headers-css的页面标题



我决定创建一个项目，在其中收集网站标题部分的模板，这些模板被设计为单独的页面。现在，如果需要类似的元素，则可以快速找到它并将其集成到新项目中。即，我创建了17个页面标题变体。我计划在不久的将来扩展这个项目。在处理这些元素时，我特别注意以下几点：



  • 灵活性。
  • 充分响应的设计。
  • 使用Sass，可以轻松编辑模板（尽管在这一方面，我仍然需要对代码进行一些重构）。
  • 可访问性（如果遇到问题-请在项目任务跟踪器中添加一个条目）。


这是查看headers-css项目的页面。而这里是该项目的GitHub的仓库。



如何创建网页的标题部分？









More articles:


All Articles