flex 圣杯布局
2019-03-04 09:53:54来源:博客园 阅读 ()
基本思路
圣杯布局分为3段:上、中、下。 中段被分为:左、中、右3块。
1:采用flex布局时,先把弹性容器主轴设置为垂直方向(flex-direction:column)
2:上、中、下3块弹性项目设置均匀拉伸(flex:1)或固定上、下两端大小,让中间自动拉伸。注意:flex:拉伸是方向为主轴方向
3:中段部分在设置为弹性容器,主轴方向为水平方向(flex-direction:row),此时左、中、右3块为弹性项目。中间块设置为自动拉伸,左、右两块可设置固定宽度。
代码
<div class="container"> <div class="header"></div> <div class="content"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </div>
.container{ display: flex; flex-direction: column; height: 100vh; } .header, .footer{ height: 75px; background: greenyellow; } .content{ display: flex; flex-direction: row; flex: 1; } .left,.right{ width:200px; background: darkorange; } .center{ flex: 1; }
原文链接:https://www.cnblogs.com/whnba/p/10462787.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS Grid 布局 2020-06-01
- 构建一个杂志布局(译文) 2020-05-14
- 【2020Python修炼记】前端开发之 CSS基础布局 2020-05-13
- HTML连载86-添加视频、伸缩布局 2020-05-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash