vux flexbox使用_如何使用Flexbox构建条形导航

vux flexbox使用

多亏了flexbox ，如今我们可以相对轻松地构建一些非常吸引人的现代布局。 在本教程中，我们将研究最近用于Google National Parks的界面，并了解flexbox如何帮助我们对其进行改进。

与往常一样，在继续进行操作之前，让我们看一下要构建的内容（您可能需要签出较大的版本，因为在大于800px的视口中会产生完整效果）：

确保将鼠标悬停在链接上以触发相应的效果。

标记

首先，让我们检查一下我们将用于构建此布局的标记。 我们定义一个带有五个链接的div元素（您可以使用任何您认为合适的元素）。 我们的每个链接都包含一个带有overlay类的div 。 在下面，您可以看到我们代码的骨架：

<div class="flex-wrapper">
  <a href="" class="one">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #1</h2>
        <p>Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.</p>
      </div>
    </div>
  </a>
  
  <!-- four more links here -->
</div>

初始CSS样式

准备好标记后，我们开始定义一些初始CSS样式，特别是：

• 将最外面的div指定为flex容器，并将其高度设置为等于高度为height: 100vh的视口高度。
• 为所有链接（弹性项目）设置相等的宽度。 为此，我们给他们每个flex: 1 。 此外，我们所有的链接都将具有背景图像（来自unsplash.com ），该背景图像涵盖了视口的高度。 作为备用（以防无法使用图片），我们还为每个图片指定了唯一的背景色。

• 当我们将鼠标悬停在一个链接上时，它的大小是其他链接大小的三倍。 我们通过更改目标链接的flex属性的值来实现。 令人高兴的是，此属性属于动画CSS属性 ，因此我们能够生成平滑的过渡效果（至少在最新的浏览器中）。

这是CSS代码的一部分，展示了我们上面描述的内容：

.flex-wrapper {
  display: flex;
  height: 100vh;
}

.flex-wrapper a {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex .4s;
}

.flex-wrapper .one {
  background-image: url(IMAGE_PATH);
  background-color: red;
}

.flex-wrapper a:hover {
  flex: 3;
}

到目前为止，如果我们在支持flexbox的浏览器中预览演示，我们将看到以下结果：

样式叠加层

我们的下一步是为叠加层分配一些样式。 这是我们要做的：

• 给叠加层与父链接相同的尺寸。 我们可以通过绝对地定位它（相对于直接父对象），然后为所有偏移属性指定零值来实现此行为。
• 将叠加层定义为flex容器。 这样，我们可以将其直接子项（即.overlay-inner元素）垂直和水平.overlay-inner 。
• 当我们将鼠标悬停在父链接上时，将半透明的灰色背景添加到叠加层。

以下是相关CSS样式：

.flex-wrapper .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color .4s;
}

.flex-wrapper a:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

内部覆盖

现在，是时候设置叠加层内部的样式了。 默认情况下，它们是隐藏的，仅当我们将鼠标悬停在相应的父链接上时才应显示。 但不会立即，我们会在一段时间内将其显示出来。 此延迟很重要； 如果我们没有特别定义，过渡效果看起来会有些难看。 删除它并测试演示以了解我的意思。

因此，仅回顾一下，首先链接变大，然后叠加层元素变为可见。 另外，我们使用translate3d()创建一些幻灯片效果。 最后但并非最不重要的一点是，我们使用了transform-style: preserve-3d hack（或类似的 hack），以防止在不同浏览器之间出现闪烁效果。

以下是相关CSS样式：

.flex-wrapper .overlay-inner * {
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}

.flex-wrapper .overlay h2 {
  transform: translate3d(0, -60px, 0);
}

.flex-wrapper .overlay p {
  transform: translate3d(0, 60px, 0);
}

.flex-wrapper a:hover .overlay-inner * {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: all .3s .3s;
}

让我们看看这给了我们什么。

响应Swift

在大屏幕上，该页面看起来不错，但是在小屏幕上，甚至在中型屏幕上，我们都需要进行一些调整。 例如，这是我们可以做的一些事情：

• 通过向其添加flex-direction: column来翻转flex容器的主轴。 这样一来，伸缩项目就会从上到下流动。
• 取消所有过渡效果，并默认显示覆盖元素。

我们的桌面优先媒体查询如下所示（我之所以使用800px，是因为它适合本文中的嵌入式演示-您可以选择自己感觉最佳的一种）：

@media screen and (max-width: 800px) {
  .flex-wrapper {
    flex-direction: column;
  }
  
  .flex-wrapper a:hover {
    flex: 1;
  }
  
  .flex-wrapper a:hover .overlay {
    background-color: transparent;
  }
  
  .flex-wrapper .overlay h2,
  .flex-wrapper .overlay p {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

这是导航的最终外观：

浏览器支持

该演示可在所有最近支持flexbox的浏览器中运行。

在某些浏览器中，您可能会注意到flex属性的动画不如应有的平滑，或者根本不起作用。 例如，IE11不会设置该属性的动画，而Edge可以设置该动画。 考虑到flexbox是一种仍在不断发展的新布局模式，这足够合理。

结论

在本教程中，我们通过学习如何构建时尚的导航布局来提高了Flexbox的知识。 希望您喜欢我们在此处构建的内容，并为您的下一个项目带来了灵感！

如果您构建类似的布局，请不要忘记向我们展示您使用的方法（纯CSS或基于JavaScript的解决方案）。

在结束之前，我想与您分享一些站点，这些站点的布局与我们刚刚创建的布局类似：

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-striped-layout-with-flexbox--cms-27272

vux flexbox使用