《转载》使用CSS3 Flexbox布局

Flexbox(中文版本能够点击这里)的布局是一个用于页面布局的全新CSS3模块功能。它能够把列表放在同一个方向（从左到右或从上到下排列），而且让这些列表能延伸到占用可用的空间。较为复杂的布局能够经过嵌套一个伸缩容器（flex container）来辅助实现。

Flexbox能够简单快速的建立一个具备弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可让元素在容器（伸缩容器）中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，好比说三列布局，能够很是简单的实现。

 

看看一些例子来了解Flexbox擅长哪一种东西。

伸缩容器（flex containers）和伸缩项目（flex items）

一个Flexbox布局是由一个伸缩容器（flex containers）和在这个容器里的伸缩项目（flex items）组成。

伸缩容器（flex containers）是一个HTML标签元素，而且“display”属性显式的设置了“flex”属性值。在伸缩容器中的全部子元素都会自动变成伸缩项目（flex items）。

这有一个三列布局的例子。外面的div容器是一个伸缩容器，而里面的left、main和right三个div都是伸缩项目：

设置一个简单的伸缩容器很容易，代码以下：

<div class="container"></div>    

.container {
  display: flex;
}    

伸缩方向与换行（flex-flow）

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。若是伸缩容器设置了“flex-flow”值为“row”，伸缩项目排列由左向右排列：

若是“flex-flow”值设置为“column”，伸缩项目排列由上至下排列：

这里将展处样设置伸缩容器，使用伸缩项目在一行中显示：

.container {
  display: flex;
  flex-flow: row;
}    

一个伸缩容器中的全部伸缩项目既能够排列在单行也能够多行排列。这个主要由“flex-flow”是否设置为“wrap”来决定。若是伸缩容器设置了“wrap”属性值，当伸缩项目在伸缩容器中没法在一行中显示的时候会另起一行排列。

这里展现了如何将伸缩容器设置为“wrap”:

.container {
  display: flex;
  flex-flow: row wrap;
}    

伸缩项目（flex items）

在伸缩容器中的全部子元素都将自动变成伸缩项目。没有额外配置CSS的必要。你惟一须要的作的就是设置伸缩项目的尺寸。

若是伸缩容器把“flex-flow”设置为“row”后，伸缩项目将须要设置他们的宽度。伸缩项目的高度将会自动设置为伸缩容器的高度：

若是伸缩容器把“flex-flow”设置为“column”后，伸缩项目将须要设置他们的高度，伸缩项目的宽度将会自动设置为伸缩容器的宽度：

给伸缩项目设置“width”和“height”属性来定义伸缩项目尺寸，而这个伸缩项目是独立于其余伸缩项目。例如，若是咱们给主内容（content）设置了一个600px的宽度，无论伸缩容器中有一个、两个或者上百个伸缩项目，主内容的宽度都是600px。

若是你想伸缩项目根据伸缩容器剩余的空间来决定伸缩项目的宽度，你可使用“flex”属性。例如，咱们能够告诉浏览器，左边栏和右边栏占用了伸缩容器减去主内容宽度的空间。

flex的值于对应的空间成正比。若是左边栏设置了值为“1”和右边栏设置了值为“2”，伸缩容器剩余的空间将按比例分配给左边栏和右边栏，而且右边栏所占的空间是左边栏的两倍：

下面是示例中运用在伸缩项目上的一些代码，展现了独立宽度和按比例计算的宽度：

.main {
  width: 600px;
}
.left {
  flex: 1;
}
.right {
  flex: 2;
}    

完整的实例

这是一个很简单的实例，Flexbox建立了一个经典的三列布局。主内容宽度为60%，而边栏是使用“flex”属性，按比例自动根据伸缩容器剩余空间计算获得对应的宽度：

HTML结构

<div class="container">
  <nav class="nav left">…</nav>
 
  <section class="main">
    …
  </section>
 
  <nav class="nav right">…</nav>
</div>    

CSS代码

.container {
  display: flex;
  flex-flow: row;
}
.main {
  width: 60%;
}
.left {
  flex: 1;
}
.right {
  flex: 2;
}    

示例效果

在线演示案例。

浏览器支持

在2012年写做时，浏览器支持定案（最新版本）语法并非很好。这个例子能够在Opera和webkit内容的Chrome下运行很好（webkit下须要添加前缀-webkit）。

在个人文章示例代码中没有写上浏览器的前缀，主要是让你们更好的理解。在2013年03月前为了更普遍的支持浏览器，你须要添加webkit内核和ie浏览器的前缀。你也可能须要考虑添加支持flexbox的老语法版本。我我的认为能够先学习flexbox的使用，在实际项目中推迟使用，直到最终的语法获得更多浏览器的支持。

 

原文连接：http://www.w3cplus.com/css3/css3-flexbox-layout.html