盒子嵌套模型求大神指点
求具体代码，我试了好多次，不是这有问题就是那有问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body > * {width:800px;margin:0 auto;}
nav > * {width:120px;height:32px;background:#cdf;color:black;display:block;text-align:center;line-height:32px;}
</style>
</head>
<body>
<header style="height:60px;background:#ccc;"></header>
<nav style="display:flex;justify-content:space-between;background:#eee;">
<a>nav1</a>
<a>nav1</a>
<a>nav1</a>
<a>nav1</a>
<a>nav1</a>
</nav>
<main style="display:flex;">
<div style="margin-right:10px;background:#ccc;width:300px;height:260px;"></div>
<div style="flex:1;background:#ccc;height:260px;"></div>
</main>
<footer style="background:#eee;height:60px;"></footer>
</body>
</html>
使用margin:0 auto;让元素横向居中分布
使用flex弹性布局，可让子元素在一行上布局
justify-content设置横向布局方式，space-between是平均分布
flex:1 是弹性伸缩到占满剩余空间
div+flex布局