三栏布局之flexbox布局

代码

HTML：

<section class="layout flexbox">
	<article class="left-center-right">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</article>
</section>

CSS:

.flexbox .left-center-right{
	display: flex; //父级元素设置flex，子元素默认横向布局
}
.center{
	flex: 1;// 这个属性是关键。
}

优点

• felxbox布局是css3里新出的一个，它就是为了解决前面两种布局方式的不足出现的，是比较完美的一个，十分适合移动端。
• 对响应式布局能力爆表，加上css中的媒体查询，简直是利器
• 只需要写一两个属性就可以很快的实现垂直居中和水平居中，还可以实现等高。
• 在沿 X 轴排列和沿 Y 轴排列间互相转换。可缩可放，可行可列，还有自适应空间能力。
• 同一个效果可以有多种实现写法。

缺点

• 入门困难。如你是从以前布局学习过来的，在学习这个布局中，你需要忘掉之前学习的块元素和行内元素的特性及特征，还要学习一些这个布局特有的概念和属性。
• 过于灵活。同一个效果，有多种写法，这个对新手来说，反而不是什么好事。就如一句话说的，人人都向往自由，却不是每个人都能驾驭的了自由。
• 兼容性不怎么好，不能兼容IE8以下的浏览器。

适用场景

特别适合移动端和响应式布局，并且不需要兼容IE9以下的业务场景。尤其是在需要缩放的时候表现很厉害。