vux flexbox使用_如何使用Flexbox制作自适应的可滚动面板

vux flexbox使用

如果您一直在跟上ZURB在Foundation for Apps方面所做的工作，您可能已经注意到他们的大多数演示模板都有一些漂亮的可滚动面板。

这些实际上是非常惊人的-特别是对于混合应用程序。 还记得框架过时之前的方便程度吗？ 好了，现在您可以以响应方式恢复该功能。

经过一番修补后，我能够使用这些面板的基本功能，这就是我们今天将学习的方法。

1.从头开始

我们将从一些非常基本的标记开始。 最重要的部分是用于包装整个页面的包装容器。

<div class="wrap">

  <main>

    <aside>
      <h1>Sidebar</h1>
      <p>
        lipsum...
      </p>
    </aside>

    <article>
      <h1>Content</h1>
      <p>
        lipsum...
      </p>
    </article>

  </main>

</div>

2. CSS

CSS中的事情很快变得有趣起来。 首先，我们希望html和body选择器的height: 100% 。 我们这样做是为了设置.wrap元素，我们将其设置为height: 100vh 。 对于vh单元，我们要说的是我们希望该应用占据视口的整个高度，以便其中包含的元素将被强制滚动。

我们还将.wrap设置为display: flex以便为子元素赋予flex属性。

html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

注意：多年来没有记住Flexbox的所有各种语法，而是尝试使用Autoprefixer 。 然后，您只需要使用W3C spec语法，其余的工作就可以支持尽可能多的浏览器。

3.变得灵活

现在我们已经有了“外壳”设置，我们可以开始在其中设计非常标准的flex元素了。 唯一的技巧是确保将这些子元素设置为overflow-y: scroll以强制执行滚动条。

main {
  flex: 1;
  display: flex;
}

aside, article {
  overflow-y: scroll;
  padding: 2em;
}

aside {
  flex: 1;
}

article {
  flex: 2;
}

4.获得回应

让我们更进一步，将侧边栏堆叠在较小设备的内容区域顶部，使我们的网站具有响应能力。 就像在媒体查询中添加一个CSS规则一样简单。

@media (max-width: 800px) {
  main {
    flex-direction: column;
  }
}

结论

这些步骤应该足以使您开始在整个网站上使用此技术。 现在，我知道该怎么做，现在可以找到各种放置这些可滚动面板的地方。

要正确查看此操作，请查看Codepen上的演示 。 另外，看看我使用这种技术进行的非正式Stylus重新设计 。

您如何看待自己使用它？

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-make-responsive-scrollable-panels-with-flexbox--cms-23269

vux flexbox使用