flexbox布局方式
实现原理：首先定义三个区块，分别为左中右，并且统一设置高度为200px，然后在这三个区块的父元素中设置display:flex，设置左边栏和右边栏宽度为200px,中间区块设置flex:1
优点：比较完美的一种方式，在移动端基本都是使用这个布局方式，这是css3中的新的布局方式，当设置最小高度后，中间区块内容溢出时高度会自动撑开，左右两边的高度也可以跟着撑开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html *{
padding: 0;
margin: 0;
}
.layout.flexbox article div{
min-height: 200px;
}
.layout.flexbox .left-right-center{
display: flex;
}
.left{
width: 200px;
background-color: red;
}
.right{
width: 200px;
background-color: blue;
}
.center{
background-color: green;
flex: 1;
}
</style>
<body>
<section class="layout flexbox">
<article class="left-right-center">
<div class="left"></div>
<div class="center">flexbox解决方案</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
效果如下：拉动浏览器窗口的时候，中间宽度自动变化，左右边栏不会变化
