flex 实例 豆瓣手机端布局实现
2019-03-06 07:17:46来源:博客园 阅读 ()
0、最终成品
1、头部布局实现
<div class="module-header"> <div class="m-left" style="background:red"> <div class="1">豆瓣</div> <div class="2">搜索</div> </div> <div class="m-right" style="background:royalblue"> <div class="1">打开APP</div> </div> </div>
1:设置module-header为弹性容器,可采用两端对齐或把m-left设置为主轴起点边缘对齐、把m-right设置为主轴终点边缘对齐
2:左、右两边可能存在多项,那么在把它们两块设置为弹性容器
3:考虑到弹性项目大小可能不一样,可设置为垂直居中。
.module-header { display: flex; flex-direction: row; align-content: center; padding: .5rem; } .module-header .m-left { display: flex; flex: 1; justify-content: flex-start; } .module-header .m-right { display: flex; flex: 1; justify-content: flex-end; }
2、多行双排并列
主轴 设置为多行,水平方向两端对齐
<div class="module-column-two quick-nav"> <div class="m-item"><a href="#">影院热映</a></div> <div class="m-item"><a href="#">欧美新碟榜</a></div> <div class="m-item"><a href="#">豆瓣时间</a></div> <div class="m-item"><a href="#">使用豆瓣App</a></div> </div>
.module-column-two { display: flex; flex-direction: row; flex-wrap: wrap; background: #fff; padding: .5rem; justify-content: space-between; } .module-column-two .m-item { margin: .5rem 0; flex:0 0 calc(100% / 2 - .5rem); }
3、单排 1 vs 多
<div class="module-1v2"> <div class="m-item-1"><img src="../i.png"></div> <div class="m-item-child"> <div class="module-flex-1"><img src="../i.png"</div> <div class="module-flex-1"><img src="../i.png"</div> </div> </div>
.module-1v2 { display: flex; flex-direction: row; } .module-1v2 .m-item-1 { flex: 2; } .module-1v2 .m-item-child { display: flex; flex: 1; flex-direction: column; }
4、图文排序
<div class="module-txt"> <div class="m-item-t"> <div class="flex-1" style="background: gold">标题</div> <div class="flex-1" style="background: rebeccapurple">内容</div> <div class="flex-1" style="background: gold">时间</div> </div> <div class="m-item-p"> <img src="../i.png"> </div> </div>
.module-txt { display: flex; flex-direction: row; } .module-txt .m-item-t { flex: 4; display: flex; flex-direction: column; justify-content: space-between; } .module-txt .m-item-p { flex: 1; }
样本:http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2-Flexbox/flex%E7%BB%83%E4%B9%A0-%E8%B1%86%E7%93%A3%E9%A6%96%E9%A1%B5/
源码下载:链接:https://pan.baidu.com/s/1Y6cu5R9BgVf5omAEgyZLVw
提取码:44nt
复制这段内容后打开百度网盘手机App,操作更方便哦
原文链接:https://www.cnblogs.com/whnba/p/10474377.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:多行文本超出后隐藏,超出3行隐藏
- HTML开发实例-简单相亲网站开发(主体为table) 2020-05-27
- CSS3--flex布局 2020-05-01
- Bootstrap 滚动监听+小工具+Flex(弹性)布局+多媒体对象 2020-04-20
- 弹性盒模型 2020-04-02
- 用flex布局实现栅格系统 2020-03-15
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