使用flexbox来布局web应用

使用 flexbox 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 <div> 元素、绝对定位 和一些JavaScript hacks, 使用仅仅几行 CSS 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：

• 你想要将一个元素放在页面的中间
• 你想要一组在垂直方向可以一个紧挨一个的布局容器
• 你像要创建一行按钮或者其它元素，这些元素在小屏幕中可以垂直折叠

这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 flexbox 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 the more general guide to using CSS flexible boxes.

基础

如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 <div> 元素中，通过设置 display 属性为 flex 来使用flexbox，然后设置它任意一行的 flex-flow 属性, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。

接下来，只要你想让某个元素使用弹性布局，就为它添加 flex 属性。一般情况下，你将会使用下列三个值之一：

• 如果你想让元素仅仅使用它本身的宽度，比如按钮，则设置 flex: none，none 将会被解释为 0 0 auto.
• 如果想要一个固定大小的元素，则设置 flex: 0 0 size。如：flex 0 0 60px。
• 如果你想让元素自动扩展到可以利用的空间，如果有多个这种类型的元素，它们可以平均分配空间，则设置 flex: auto，它代表 1 1 auto.

有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。

示例 1: 在页面中把一个元素居中

在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。

CSS 内容

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.horizontal-box {
  display: flex;
  flex-flow: row;
}
.spacer {
  flex: auto;
  background-color: black;
}
.centered-element {
  flex: none;
  background-color: white;
}

HTML 内容

<div class="vertical-box">
  <div class="spacer"></div>
  <div class="centered-element horizontal-box">
    <div class="spacer"></div>
    <div class="centered-element">Centered content</div>
     <div class="spacer"></div>
  </div>
  <div class="spacer"></div>
</div>

结果

示例2: 垂直放置一系列的容器

假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 flex 属性，设置头部区域 flex 属性，底部区域不设置来实现自动扩展功能。

CSS 内容

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.fixed-size {
  flex: none;
  height: 30px;
  background-color: black;
  text-align: center;
}
.flexible-size {
  flex: auto;
  background-color: white;
}

HTML 内容

<div id="document" class="vertical-box">
  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
  <div id="flexible-content" class="flexible-size"></div>
  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
</div>

Javascript 内容

var height = 400;
document.getElementById('increase-size').onclick=function() {
  height += 10;
  if (height > 500) height = 500; 
  document.getElementById('document').style.height = (height + "px");
}

document.getElementById('decrease-size').onclick=function() {
  height -= 10;
  if (height < 300) height = 300; 
  document.getElementById('document').style.height = (height + "px");
}

结果

这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。

示例3: 创建一个水平折叠的容器

在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 flex-flow 的值为 wrap 来实现。

CSS 内容

.horizontal-container {
  display: flex;
  width: 300px;
  flex-flow: row wrap;
}
.fixed-size {
  flex: none;
  width: 100px;
  background-color: black;
  color: white;
  text-align: center;
}

HTML 内容

<div id="container" class="horizontal-container">
  <div class="fixed-size">Element 1</div>
  <div class="fixed-size">Element 2</div>
  <div class="fixed-size">Element 3</div>
</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>

Javascript 内容

var width = 300;

document.getElementById('increase-size').onclick=function() {
  width += 100;
  if (width > 300) width = 300; 
  document.getElementById('container').style.width = (width + "px");
}

document.getElementById('decrease-size').onclick=function() {
  width -= 100;
  if (width < 100) width = 100; 
  document.getElementById('container').style.width = (width + "px");
}

结果

参考

• Using CSS flexible boxes