html5弹性布局两行三列,html5 css练习，弹性三栏布局

*{

margin: 0;

padding: 0;

}

body,html{

width: 100%;

height: 100%;

font: bold 24px 隶书;

}

header,footer{

background: rgba(30,10,10,0.6);

padding: 15px;

text-align: center;

line-height: 2em;

color: #fff;

}

section{

background: rgba(5,5,5,0.5);

flex-grow: 1;

display: flex;

flex-flow: row;

}

article{

background: orange;

min-width: 500px;

flex-grow: 1;

}

nav,aside{

background: rgba(80,20,20,0.5);

width: 180px;

}

body{

display:flex;

flex-flow: column;

}

弹性三列布局

头部

左导航

内容部分

右边栏

底部