双飞翼布局

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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。