摘要：最终成品头部布局实现豆瓣搜索打开设置为弹性容器，可采用两端对齐或把设置为主轴起点边缘对齐把设置为主轴终点边缘对齐左右两边可能存在多项，那么在把它们两块设置为弹性容器考虑到弹性项目大小可能不一样，可设置为垂直居中。
<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">打开APPdiv> 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; }
主轴 设置为多行，水平方向两端对齐
<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="#">使用豆瓣Appa>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); }
<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; }
<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.ucloud.cn/yun/1161.html
摘要：从之前黄轶老师的高仿外卖开始接触过这个滚动库，感觉体验感很好，用起来也比较顺手，所以在后来的项目联系中就一直在使用。 前言 虽然在此之前已经有类似的仿豆瓣电影的webapp,但或是开发的有些简洁功能不太完善，或是体验感觉得可以再完善下，所以自己摸索着对比豆瓣和豆瓣电影两款app做了一下，初步满足了自己的想法，经过几次完善基本不会出现bug，如果发现存在问题请告诉我修改，谢谢！ 2017...
摘要：页面布局实例，成本效果图如下，源码下载在最下面。源码下载提取码样本地址Flexbox页面布局实例，成本效果图如下， 源码下载在最下面。 源码下载：https://pan.baidu.com/s/18o5hVuWtflUpgvMk3LzQ5w 提取码：wiyc样本地址：http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E...
摘要：豆瓣电影版用全家桶仿写豆瓣电影版。原计划仿写完所有页面，碍于豆瓣的接口有限，实现页面也有限。由于公开的豆瓣接口具有访问次数限制，克隆到本地体验效果更加端访问已设置宽度适配。 douban-movie(豆瓣电影wap版) 用vue全家桶仿写豆瓣电影wap版。 最近在公司项目中尝试使用vue，但奈何自己初学水平有限，上了vue没有上vuex，开发过程特别难受。 于是玩一玩本项目，算是对相关...
阅读 827·2023-04-25 23:59
阅读 3621·2021-10-08 10:04
阅读 1655·2019-08-30 14:05
阅读 985·2019-08-30 13:58
阅读 459·2019-08-29 18:41
阅读 1075·2019-08-29 17:15
阅读 2303·2019-08-29 14:13
阅读 2727·2019-08-29 13:27
