如何使用CSSFlexbox构建网站标题

css

.search {
  flex: 1;
}

现在，搜索输入将填充 brand 和nav 之间的可用空间。 但是，这有一些限制。 在较小的视口上，header 将如下所示:

搜索输入宽度不应小于此宽度，因为这样很难输入和查看全文。 下面有两种解决方案：

我更喜欢第二种解决方案，因为它不会过早隐藏导航。 一般来说，如果元素不影响布局，我会尽量避免隐藏它。

Header 变化 3

对于这个示例，HTML标记是相同的，但是 header 里的元素顺序是不同的。我们如何才能做到这一点? 你可能想到用 order 属性来解决这个问题 ?

html

  
    
    
    Track
  

css

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

.nav {
  order: -1;
}

这样有个问题，间隔空间不会使 logo 居中，它只是分散项目之间的空间。

解决方案是给每个子项一个flex: 1，这将在它们之间分配可用空间。

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

这样，由于flex: 1，按钮元素变宽了， 解决此问题的唯一方法是将其包裹到另一个元素中。

HTML

  
    
    
    
      Track
    
  

这样，我们就可以将下面的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;
}

关于“如何使用CSS Flexbox构建网站标题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。