CSS3 flexbox使用指南（二）-- 垂直布局

在上一篇文章中，我们介绍了强大的CSS布局属性Flexbox，并介绍了多种Flex的水平布局方式。Flexbox布局可以使用一句代码就将原来的水平布局变成你想要的垂直布局方式。这个特性使Flexbox布局成为完美的响应式布局设计。

在这篇文章中，我们将要来看看Flexbox还有那些强大的选项。和上篇文章一样，我们使用几个几何图形来作为Flexbox布局的元素：

<figure id="flex">
  <div id="triangle"></div>
  <div id="square"></div>
  <div id="circle"></div>
</figure>                              
                            

几何图形使用下面的CSS来生成：

#flex { display: flex; padding: 2rem; }
#triangle {
  width: 0; height: 0;
  border-bottom: 114px solid hsl(240, 30%, 50%);
  border-left: 63px solid transparent;
  border-right: 63px solid transparent;
}
#square-vert {
  width: 126px; height: 126px;
  background: hsl(300, 30%, 50%);
}
#circle-vert {
  width: 126px; height: 126px;
  border-radius: 50%;
  background: hsl(340, 30%, 50%);
}                              
                            

默认情况下，元素会沿X轴进行排列，要改变它，我们只需要简单的声明：

#flex { flex-direction: column; }

这时元素会被从上到下排列，并且是左对齐。我们上一篇文章所使用的水平布局选项在这里都可以使用：现在只是变成了垂直方向的布局而已。

#flex {
  height: 500px;
  justify-content: flex-end;
  flex-direction: column-reverse;
  align-items: center;
}                              
                            

结合Flexbox的水平和垂直布局方式，我们可以制作出完全相对于父容器居中的布局。这是我们之前介绍过的6种使用CSS定位居中的方法的其中一种。

在Mobile使用Flexbox

使用flexbox来在大屏幕和小屏幕之间切换布局是一件非常容易的事情。下面是一段布局的伪代码：

<header></header>
<div id="wrapper">
<nav></nav>
<main></main>
</div>
<footer></footer>                              
                            

我们可以在大屏幕和小屏幕上分别设置<nav>和<main>的flexbox布局方式：在大屏幕上<nav>和<main>都是水平排列，在小屏幕上，<nav>和<main>变成垂直布局：

div#wrapper { display: flex; }                              
                            

@media (max-width: 400px;) {
  div#wrapper { flex-direction: column }
}                              
                            

flexbox垂直布局部分就介绍到这里，后面还有更多关于flexbox布局的介绍，敬请期待。