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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>彈性三列布局</title>
<link rel="stylesheet" type="text/css" href="style15.css">
</head>
<body>
<header>頭部</header>
<section>
<nav>左導航</nav>
<article>內容部分</article>
<aside>右邊欄</aside>
</section>
<footer>底部</footer>
</body>
</html>
html5 css練習，彈性三欄布局