css3伸缩盒，考察css3 box-flex 等新布局属性

Readme.md

根据已有html结构，用CSS3完成图1的布局，主要考察对CSS3新属性 display: -webkit-flex flex 或 display: box box-flex 的掌握程度。

如果能写出以上几个属性，并了解这些属性的作用，就算掌握CSS3新布局方式。

参考资料 参考 http://www.inserthtml.com/2012/05/css3-flex-box-specification-change-layout-design/

<!--已知的html结构，不能修改-->
<div id="header"></div>
<div id="content">
  <div id="left-sidebar"></div>
  <div id="main-content"></div>
  <div id="right-sidebar"></div>
</div>
<div id="footer"></div>

(图1)

flex.css

#header {
    background: purple;
    width: 100%;
    height: 200px;
}
 
#content {
    display: -webkit-flex;
    -webkit-flex-flow: row;
    width: 100%;
}
 
#content #left-sidebar {
    width: 200px;
    height: 300px;
    background: blue;
}
 
#content #right-sidebar {
    width: 200px;
    height: 300px;
    background: green;
}
 
#content #main-content {
    -webkit-flex: 1;
    background: #eee;
}
 
#footer {
    width: 100%;
    height: 200px;
    background: orange;
}