双飞翼布局
2019-04-02 本文已影响0人
xiamihaozi
flex实现建议双飞翼布局，话不多说，开撸！！！
html
<body>
<header>header</header>
<div class="main">
<div class="left">left</div>
<div class="content">container</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
css
*{
margin:0;padding:0;border: none;
}
header,footer{
height:50px;
background: #ddd;
}
.main{
display:flex;
}
.content{
flex-grow:1;
height:400px;
background:gold;
}
.left,.right{
width:100px;
background: green;
}
