wenliangdai

使用 Flexbox 的最佳时间到来了吗?– Martin Defatte – Medium

wenliangdai · 2016-12-21翻译 · 836阅读 原文链接

作为一个前端开发者,我时常问会自己:“哇,这个新技术好酷。我可以在实际生产环境中的工作流里使用它吗,亦或者它会不会只是理论上比实际中要好?”我发现自己总是在评估新的 CSS 规范来看它是否可以让我的设计更出色,并且让我的代码更加简洁且易于管理。

FLEXBOX 对于响应式设计来说是极好的

Flexbox 不是一个新的特性...但是,随着近年来移动设备数量猛增,以及它们对于灵活的、响应式的布局和模式的需求,如果你还没有开始使用,那么 Flexbox 是一个你一定要考虑用在你下一个项目里的东西。然而别担心,你可以将它与你使用的任何格栅式框架一起使用。我目前仍在使用一个改良版的 Skeleton 格栅式布局,我在其中添加了一些 SASS 变量和 mixins。如果你真的对它感到着迷,可以试着将 Flexbox 与 vh 或 vw 这种单位一起使用,而不是像素或百分比。

但是桌面浏览器的兼容性怎么样呢?

别担心,我懂你的意思。去 CanIUse.com 查看兼容性表格。在写这篇博客的时间,目前的提供下载的浏览器都支持 Flexbox,只有反应迟钝的 IE11 做到“部分支持”。如果你把 bug 提前考虑在内并做好处理,这点是可以被克服的。

所以 IE 依旧是一个让人痛苦的事情,对吗?

是的,但是它的市场占有率很小,我不会对它感到烦恼。来看看 W3C 上最新的 IE 使用率统计吧。在写作这篇博客的时间点, IE10 和更老的版本仅占所有浏览器使用率的 0.4%(看图 1.1)。但是,如果可能的话,在你使用 Flexbox 之前你应当考虑是否你的用户有很多在使用 IE10。

figure 1.1

好吧。既然有了广泛的支持,如何开始使用它呢?

我不会尝试再去创建已经大量存在的关于 Flexbox 的演示,你应当阅读 CSS 大牛 Chris Coyier 写的 “A Complete Guide to Flexbox” 以及 Dimitar Stojanov 写的 “A Visual Guide to CSS3 Flexbox Properties”。这两篇文章都很好地解释了 Flexbox 的使用规则。我在布局中使用 Flexbox 时,常常会回去参考这些文章...因为对我来说它还是有点新。

看看 这个演示.

这是我如何在工作中使用它

一个你经常会听到的编程真理是“不要重复你自己”。本着代码简洁精神,我在工作中采用了 SASS mixin library 与 Flexbox 结合使用,它解决了需要去给所有浏览器加前缀的麻烦事。不知道 SASS 是什么?你可能需要阅读我的上一篇文章

下方这个 mixin 让我可以仅用 1 行来调用所有 5 个 Flexbox 的定义:

@mixin flexbox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}
.element {
  @include flexbox;
}

简单,轻松。

想想所有的 Flexbox 规则,那么这个东西真的可以节约很多时间。我不认为浏览器前缀会是一个长期问题,因为所有主流浏览器都开始迎合这种语法。但是同时 mixin 库可以填平这期间的空缺。这里有关于不同浏览器前缀的更多信息

我已经讨论了足够多关于为什么 Flexbox 是个好东西,以及如何在你的工作流中使用它...对你可能会好奇“如何真正地在设计中使用它?”好吧...我在最近上线的网站 Next Door Milwaukee 已经使用了 Flexbox。

在这个项目里,美术指导的设计要求每个格子紧密结合没有空隙,并且覆盖的文字要求垂直居中(看图 1.2)。自从 web 开发的社区停止使用 table 来做页面布局之后,垂直居中一直是一个实现难点。现在,我们可以通过 Flexbox 规则 “align-items: center;” 来轻松实现。

figure 1.2

通过使用 Flexbox,我轻松的规划好了每个格子的高度,不管它里面的内容是什么,并且不用给高度设定一个具体的值。这样实现了一个更加一体化的外观,但同时可以让每个 box 自由伸缩 - 这对于构建响应式网站来说是极好的。下方是一个例子,是从 Next Door Milwaukee 网站直接获取下来的:

The HTML:

<section id="section-1" class="dualCTAbox flexcontent row">
  <div class="ctaBox" style="background-image:url('image_1.jpg');">
    <a href="#">
      <div class="icon"></div>
      <h5>Section Title 1</h5>
      <p>Tation aliquip vulputate ex sit facilisis accumsan te eu nonummy feugait autem.</p>
      <div class="btnWrapper"><span class="button button-primary">Learn More</span></div>
    </a>
  </div>
  <div class="ctaBox" style="background-image:url('image_2.jpg');">
    <a href="#">
      <div class="icon"></div>
      <h5>Section Title 2</h5>
      <p>Tation aliquip vulputate ex sit facilisis accumsan te eu nonummy feugait autem.</p>
      <div class="btnWrapper"><span class="button button-primary">Learn More</span></div>
    </a>
  </div>
</section>

The SASS (用了嵌套的 CSS):

.dualCTAbox {
  @include flexbox;
  @include align-items(stretch);
  @include align-content(stretch);
  @include flex-wrap(wrap);
  .ctaBox {
    text-align:center;
    @include align-self(stretch);
    @include flexbox;
    a {
      @include flexbox;
      @include align-items(center);
      @include justify-content(center);
      @include flex-wrap(wrap);
      @include align-content(center);
      div,
      h5,
      p {
        width: 100%;
        margin-bottom: .8em;
        line-height: 1.2em;
      }
      h5 {
        margin-bottom: 0;
        line-height: 1.2em;
      }
      width: calc(100% - 40px);
      padding: 20px;
      min-height: 240px;
    }
    .button{
      margin-bottom: 0;
    }
  }
}

现在,如果想要在其中添加 CSS Media Queries,你可以放心地通过视口宽度来更新元素宽度。你甚至可以改变元素在浏览器里出现的顺序。这在移动设备里显得更加重要,因为如果你真的在乎你的用户,你可能需要重新排序导航栏、边栏、或者“联系方式”这些东西来达到在小屏幕上的最佳用户体验。

如果你还没开始使用,快来吧,时候正好。已经快要 2017 年了,让我们推动前端的发展吧。

原文通过 Jigsawllc.com 发布。

推荐阅读:

译者wenliangdai尚未开通打赏功能

相关文章