看看接下来会发生什么:CSS3 Flexible Boxes

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

本文由大漠根据的《A Look at What’s Coming Up: CSS3 Flexible Boxes》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://www.onextrapixel.com/2013/04/23/a-look-on-whats-coming-up-css3-flexible-boxes,以及作者相关信息

——作者:

——译者:大漠

设计一个网站,布局可能是最生要的元素之一。当你网站的用户理解你的布局和喜欢上你的网站布局,他们用起来很开心,这样用户会在你的站点呆的时间更长,甚至会定期访问你的网站。我们通过导航能浏览一些高质量的内容,但由于网站混乱的设计和完全乱套的布局,我们第一反应,那就是尽可能快的离开这个网站。

从小屏幕(240px)到超大的屏幕(1920px以上),没有一个标准的布局可以适合这些不同屏幕的尺寸。到目前为止,我们要么是使用inline-block,要么是使用浮动给一个网站进行布局。不管使用的是什么方法,要让网页在不同的区域得到响应式布局,我们需要大量的变通方法来进行检测。幸运的是,W3C意识到了这一点,实际上是给开发人员谋福利。这个就是我们关注的Flexible Boxes。

看看接下来会发生什么:CSS3 Flexible Boxes

这篇文章是关于CSS3 Flexible Box布局模块,截至2013年1月10日支持的浏览器只有Chrome 21.0+和Opera 21.0+。

Flexible Boxes来了

老的和新的Flexible Boxes

Flexible Boxes是有点让人摸不到头脑,因为在几个浏览器中实现Flexible Boxes模块有好几个版本。CSS-Tricks在《"Old" Flexbox and "New" Flexbox》做了一个简短的解释,告诉我们不同的版本可用以及如何认出他们。特别声明:这篇文章是关于Flexbox的最新版本(使用的是"display:flex")。

Flexible Boxes是什么?

现在,最好的方法是通过实例来解释某些东西,所以,我们将使用flex来创建一个完整的布局。为了让我们避免任何阻碍级的事情,一切都会使用flex来创建伸缩容器和伸缩项目。

看看接下来会发生什么:CSS3 Flexible Boxes

上图来自于W3C,有关于Flexible Boxes术语的标识。

首先,在这里你要有一些概念,我们将更好的理解:

<div class="flex-container"> <!-- 这个是伸缩容器 -->
  <div class="flex-item">1</div> <!-- 这个是伸缩项目 -->
 
  <div class="flex-item">2</div>
 
  <div class="flex-item">3</div>
 
  <div class="flex-item">4</div>
</div>	

这只是一个包含四个div标签的容器,为了让们能够灵活性适应宽度,我们需要添加一些CSS3样式:

.flex-container {
  /* Chrome下的写法 */
 
  display: flex;
}
 
.flex-item {
  -webkit-flex: 1;
 
  flex: 1;
}	

可以通过CodePen但看上面代码运行的效果

正如您所看到的,当给一个容器设置了“display:flex”,这个容器就变成了伸缩容器,而这个容器的子元素就变成了伸缩项目。伸缩项目总是会尽量的配合伸缩容器,自动的适配伸缩容器的宽(如果是行的话)或者自动适配伸缩容器的高(如果是列的话)。你是否希望伸缩容器是一行或者一列,你可以使用“flex-flow:column”属性来设置。最后每一个伸缩项目具有一个弹性属性(上面的例子是flex:1)。有了flex属性可以让伸缩项目填补多余的空间(或收缩不足的空间)来填充整个伸缩容器。

每一个伸缩容器被定义为两个轴(主轴和侧轴),但仅这两个轴往往是不够的。为了更能准确性了解这些弹性盒子,我们创建一个完整的布局实例来说明,以及回答大多数大家想知道的问题。

使用Flexible Boxes创建一个完整的布局

这里使用了HTML5的结构

<div class="flex-container"> 
  <header>
    Header
  </header>
 
  <div class="flex-area">
    <section>
      <article class='featured-article'>
        First Article
      </article>
 
      <article>
        Second Article
      </article>
 
      <article>
        Third Article
      </article>
    </section>
 
    <aside>
      Sidebar
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </aside>
  </div>
 
  <footer>
    Footer
  </footer>
 
</div>	

如果要将这个结构变成一个布局,我们需要添加一些CSS。我们将制作一个典型的布局,宽屏的页眉和页脚,一个中间容器,这个中间容器包括两列(主内容列和侧边栏列),并且主内容列将有特色的文章置顶,其他两篇文章放在下面分两列并排显示;侧边栏有三个box并列显示:

.flex-container {
  -webkit-flex-flow: column;
  display: flex;
  flex-flow: column;
}
 
header,
footer {
  -webkit-flex: 0px 0px 100px;
  flex: 0px 0px 100px;
}
 
.flex-area {
  -webkit-flex-flow: row;
  -webkit-flex: 3 1 auto;
  display: flex;
  flex-flow: row;
  flex: 3 1 auto;
}
 
section {
  -webkit-flex-flow: row wrap;
  -webkit-flex: 4 1 auto;
  display: flex;
  flex-flow: row wrap;
  flex: 4 1 auto;
}
 
article {
  -webkit-flex: 1 35%;
  flex: 1 35%;
}
 
.featured-article {
  -webkit-flex: 2 1 100%;
  flex: 2 1 100%;
}
 
aside {
  -webkit-flex-flow: column;
  -webkit-flex: 0px 0px 240px;
  display: flex;
  flex-flow: column;
  flex: 0px 0px 240px;
}
 
.box {
  -webkit-flex: 1;
  flex: 1;
}	

CodePen可以看到上面示例的效果。

看看接下来会发生什么:CSS3 Flexible Boxes

上图就是这个布局示例的效果。

我们在示例中添加了少量的代码,比如说背景和间距等,使例子清晰一些。现在我们一步一步来分析这个CSS代码,让我们能更清晰的了解发生了什么:

  1. 首先我们需要将几个容器变成伸缩容器,我们的主容器是一个定义了类名为“flex-container”的div元素,因此我们使用前面介绍的方法,在这个元素中定义一个“display:flex”。这样一来,“div.flex-container”下的所有子元素(header、div.flex-area和footer)都变成了伸缩项目。然后我们想要伸缩项目从上到下的分几行排列,所以在这个伸缩容器中还定义了一个“flex-flow:column”。
  2. 给页眉和页脚设置一个固定的高度。通过“flex”属性我们决定他们按下面的形式来表现:第一个“0”意味着我们不想让它扩展(flex-grow:1),第二个“0”意味着我们不想让它收缩(flex-shrink:0),最后一个值“100px”是收缩基准值(flex-basis)。
  3. 接下来将“div.flex-area”元素设置为另一个收缩容器,所以我们也在这个元素上设置了“dislpaly:flex”。注意,这个非常好设置了“flex”属性后也变将对应的变成了伸缩容器,而其子元素也对应的变成了伸缩项目。在这个例子中,我们将其收缩基准值(flex-basis)设置为“auto”,因为我们希望它能在主内容区内扩展任何空间,在不收缩太多的情况下扩展足够大的空间,主要出发点他们是主要内容。
  4. flex-area伸缩容器具有两个伸缩项目:<section>和<aside>,我们希望他们能从左到右相互依靠在一起,因此我们在“flex-area”伸缩容器上设置了“flex-flow”的值为“row”。同时我们也希望侧边栏有一个固定的宽度“240px”,而<section>相对于剩余的空间进行扩展或者收缩填充。因此,我们为每个伸缩项目设置了一个明确的flex属性值。
  5. <section>伸缩项目也需要变成伸缩容器,因此我们也要将其设置为“display:flex”。这次我们希望他的伸缩项目能从左到右排列,但同时也希望他们超过一行时能自动换行,所以我们设置了“flex-flow”为“row wrap”。我们希望有“特色的文章(article.featured-article)”能置顶显示,而其他的两列等宽的显示,所以我们给所有的<article>设置了“flex”值为“1”(flex-grow),并且希望这两要大于33%,小于50%为基础。我们选择了35%,然后让余下的空间自己灵活处理。
  6. 对于特色文章,我们前面说了想置顶整行显示在主内容区域内,至于扩展还是收缩我们让用户来进行决定,所以我们把他的收缩基准值(flex-basis)设置为“100%”。
  7. 最后侧边栏应该保持为一组框,将做为一个主菜单,所以我们重复上述过程。这一次我们不希望使用一个基准收缩值,便是每个伸缩项目必须自动填充所有侧边栏空间。

这是一个非常简单的布局,适合屏幕提供适量的内容。尽管如此,在小型设备下浏览,侧边栏可能会导航一些不能看到的问题,所以我们需要借助媒体查询来使它得到充分响应。

Flexbox也可以通过一些参数设置伸缩项目是否在一行或一列。

媒体查询和Flexible Boxes响应不同尺寸

虽然我们的做了很多工作,但我们的布局还不是很友好,仍然需要添加几个媒体查询来适应不同设备。

首先我们想让侧边栏显示在页眉下面,然后是主内容,接着是页脚,同时减少页眉和页脚的高度,我们应该这样做:

@media only screen and (max-width:640px) {
 
  .flex-area { 
    -webkit-flex-flow: column; 
    flex-flow: column; 
  }
 
  header, 
  footer, 
  aside {
 
    -webkit-flex: 0px 0px 50px; 
    flex: 0px 0px 50px; 
  }
 
  aside { 
    -webkit-flex-flow: row; 
    -webkit-order: 1; 
    flex-flow: row; 
    order: 1; 
  }
 
  section { 
    -webkit-order: 2; 
    order: 2; 
  } 
}	

如果用户使用一个更小的设备,两列文章中部分将被丢失显示不出来,所以我们要添加另一个媒体查询,创建一个完全垂直站点,以适应420px或者更小的设备

@media only screen and (max-width:420px) {
 
  section { 
    -webkit-flex-flow: column; 
    flex-flow: column; 
  }
 
  article { 
    -webkit-flex: 1; 
    flex: 1; 
  } 
}	

CodePen演示了一个响应式案例的布局。

看看接下来会发生什么:CSS3 Flexible Boxes

Flexboxes充许响应式布局——来自于codepen

总结

这是一个很好的,只使用最新版本css3 flexible boxes模块制作一个充分响应简单布局。使用的代码数量远远少于类似网站使用的代码量。然而,最大的不足之处是其跨浏览器的兼容问题,因为到目前他只能在Chrome 21.0+和Opera 12.10+上得到友好支持。

不过Fiefox18、Safari和IE10支持这个模块的早期语法版本,将来也会慢慢支持这个最新语法,它使我们看到这个属性将来会经常的用于布局之中,也我们的布局更简洁,更容易。与此同时,继续观注这个模块给我们带来的惊喜。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://www.onextrapixel.com/2013/04/23/a-look-on-whats-coming-up-css3-flexible-boxes

中文译文:http://www.w3cplus.com/css3/a-look-on-whats-coming-up-css3-flexible-boxes.html

返回顶部