Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:04
What would you like to do?
css3伸缩盒,考察css3 box-flex 等新布局属性

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


参考资料 参考

<div id="header"></div>
<div id="content">
  <div id="left-sidebar"></div>
  <div id="main-content"></div>
  <div id="right-sidebar"></div>
<div id="footer"></div>



#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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment