Flexbox 是一个高效的CSS UI设计标准。使用简单的几个 flexbox 属性我们就可以构建我们的页面通过一个一个小的布局快，我们可以对这些布局快可以轻松地进行定位和缩放。
在这篇文章中，我们将要通过5种flexbox的方式来解决普通的css布局问题。其中还包含了这些技术在真实生活中的实践。
创建一个等高的列
如果让你把所有的列的高度弄上去一样高，这是恨烦的。简单的通过 min-height 是不行的，因为一旦内容发生变化，那么一些列会变高而其它的仍然还是原来的高度。
用 flexbox 来解决这个问题再简单不过了，因为痛过这种方式创建的列默认情况下就是等高的。我们要做的就是初始化这个 flex 盒子，然后确保 flex-direction 和 align-items 属性被赋值为默认值。
CSS 部分：
1 | .container { |
HTML 部分：1
2
3
4
5
6
7
8
9<div class="container">
<!-- Equal height columns -->
<div>...</div>
<div>...</div>
<div>...</div>
</div>
你可以在 Easiest Way To Create Equal Height Sidebars 这篇文章中查看实例，它创建了一个包含侧边栏和主内容区的响应式页面。
重新定位元素
以前，如果我们要动态的的区改变元素的顺序，我们可能会尝试一些CSS hack，而且还有写一些 javascript，真是让人沮丧！但是有了 flexbox，只有一个CSS属性就可以搞定这个问题了！
它叫做 order ，就像这个名字一样，一切尽可能的简单。它让我们可以通过一个数字来设定这个flex项在屏幕中的出现顺序（越小的数代表越高的优先级）。
CSS 部分：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.container{
display: flex;
}
/* Reverse the order of elements */
.blue{
order: 3;
}
.red{
order: 2;
}
.green{
order: 1;
}
HTML 部分：1
2
3
4
5
6
7
8
9<div class="container">
<!-- These items will appear in reverse order -->
<div class="blue">...</div>
<div class="red">...</div>
<div class="green">...</div>
</div>
这个属性有非常多多实战应用。如果你想了解的话，你可以看 这篇文章， 它讲了如果使用这个玩意来做一个响应式的评论区。
水平垂直居中
在CSS中垂直居中问题我们经常遇到，为什么一个简单的垂直居中实现起来如此复杂？如果 Google 一下 CSS 垂直居中，可以找到无限多的解决方案，它们中的很大一部分都是采用 table 或者 transform 来实现（然而这些东西设计出来不是为来布局的）。
Flexbox 非常简单的解决了这个问题。没有个flex布局都具有两个方向（X轴和Y轴）和两个用来置顶它们都对齐方式的属性。把两个属性都设成居中对齐，我们就可以把这个元素放在它都父级容器的中间了。
CSS 部分：1
2
3
4
5
6
7
8
9.container{
display: flex;
/* Center according to the main axis */
justify-content: center;
/* Center according to the secondary axis */
align-items: center;
}
HTML 部分：1
2
3
4
5
6
7
8<div class="container">
<!-- Any element placed here will be centered
both horizonally and vertically -->
<div>...</div>
</div>
你可以阅读这篇文章来了解更多
创建一个完全的响应式网格
许多的开发者创建响应式网格的时候都依赖一个CSS框架。Bootstrap 是最流行的一个，当然还有其它成百上千个库可以帮你做到。它们都可以正常的工作并且有很多的选项，但是它们都太重了。如果你只是想要实现一个网格布局，仅仅需要 flexbox 就可以帮你搞定了！
在 flexbox 网格系统中，被设置了 display:flex 属性的元素就相当于“行（row）”。它里面的水平方向的列可以是任意数量的元素，可以通过 flex 属性来设置尺寸。flex 模型适应视口的大小，所以这个设置应该在所有的设备上看起来都是可以的。然而，如果我们发现在水平方向上没有足够的空间时，我们可以简单的通过媒体查询来现实一个垂直方向上的布局。
CSS 部分：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.container{
display: flex;
}
/* Classes for each column size. */
.col-1{
flex: 1;
}
.col-2{
flex: 2;
}
@media (max-width: 800px){
.container{
/* Turn the horizontal layout into a vertical one. */
flex-direction: column;
}
}
HTML 部分：1
2
3
4
5
6
7
8
9
10
11
12<div class="container">
<!-- This column will be 25% wide -->
<div class="col-1">...</div>
<!-- This column will be 50% wide -->
<div class="col-2">...</div>
<!-- This column will be 25% wide -->
<div class="col-1">...</div>
</div>
你可以在 The Easiest Way To Make Responsive Headers 查看这项技术的运用。
创建一个完美的紧贴页面底部的页脚
Flexbox 同样也可以很容易的解决这个问题。通过 flex 元素可以保证页脚永远在页面的底部。
给 body 标签加一个 diplay:flex 属性，这样我们就可以对整个页面使用flex模型属性。这样我们就可以把主要的内容区和页脚区分别作为 flex项，以便于我们准确的控制他们的位置。
CSS 部分：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main{
/* The main section will take up all the available free space
on the page that is not taken up by the footer. */
flex: 1 0 auto;
}
footer{
/* The footer will take up as much vertical space as it needs and not a pixel more. */
flex: 0 0 auto;
}
HTML 部分：1
2
3
4
5
6
7
8
9
10
11
12<body>
<!-- All the page content goes here -->
<div class="main">...</div>
<!-- Our sticky foooter -->
<footer>...</footer>
</body>
如果你要了解更多，你可以阅读 The Best Way To Make Sticky Footers。
结论
主流的浏览器（不包括 IE9）现在都支持 flexbox 布局模型了，所以，除非你的用户更喜欢用古老的IE浏览器，你是可以非常放心的在产品用用 flexbox 布局的！
我希望这些能够帮助你创建更加强健响应式布局！
原文地址：http://tutorialzine.com/2016/04/5-flexbox-techniques-you-need-to-know-about/