Flex 项目属性:flex 布局示例
2019-01-15 07:01:33来源:博客园 阅读 ()
flex属性:
flex属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
下面来看看使用项目属性flex的两个示例:
一、
CSS:
1 <style> 2 body{ margin: 0;padding: 0;font-size: 20px;font-weight: 600;text-align: center;line-height: 40px; } 3 #header,#footer{ height: 80px;background-color: #aaa; } 4 #content{ width: 100%;height: 600px;display: flex; } 5 #content div:first-of-type{ width: 300px;background-color: #bbb;flex: 0 0 auto; } 6 #content div:last-of-type{ background-color: #ccc;flex: 1; } 7 </style>
HTML:
1 <body> 2 <div id="header">页眉</div> 3 <div id="content"> 4 <div>左侧固定</div> 5 <div> 6 右侧自适应<br /> 7 左侧CSS属性:flex: 0 0 auto;<br /> 8 右侧CSS属性:flex: 1; 9 </div> 10 </div> 11 <div id="footer">页脚</div> 12 </body>
页面:
二、
CSS:
1 <style> 2 body{ margin: 0;padding: 0;overflow-x: hidden;font-size: 20px;font-weight: 600;text-align: center;line-height: 40px;} 3 #header,#footer{ height: 80px;background: #aaa; } 4 .content{ width: 100%;height: 500px;display: flex; } 5 .content div:nth-of-type(1),.content div:nth-of-type(3){ width: 300px;flex: 0 0 auto;background-color: #bbb; } 6 .content div:nth-of-type(2){ width: 500px;flex: 1 0 auto;background-color: #ccc; } 7 </style>
HTML:
1 <body> 2 <div id="header">头部</div> 3 <div class="content"> 4 <div>左侧固定</div> 5 <div> 6 中间自适应<br> 7 左侧:flex: 0 0 auto;<br> 8 中间:flex: 1 0 auto;<br> 9 右侧:flex: 0 0 auto;<br> 10 </div> 11 <div>右侧固定</div> 12 </div> 13 <div id="footer">底部</div> 14 </body>
页面:
代码可以直接复制到HTML页面运行,如果有不懂的地方请回顾Flex布局属性:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
文章乃参考、转载其他博客所得,仅供自己学习作笔记使用!!!
原文链接:https://www.cnblogs.com/Y1473/p/10262421.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:css3制作商品展示
下一篇:多种米字型布局方式
- CSS常用属性(入门级),持续更新 2020-05-22
- CSS3--flex布局 2020-05-01
- 【Vue】基础(数据 & 计算属性 & 方法) 2020-04-22
- Bootstrap 滚动监听+小工具+Flex(弹性)布局+多媒体对象 2020-04-20
- html表单控件禁用属性:readonly VS disabled【转】 2020-04-13
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