flex 实例豆瓣手机端布局实现

wua_wua2012 发布于2019-04-23 11:47 / 1897人阅读

摘要：最终成品头部布局实现豆瓣搜索打开设置为弹性容器，可采用两端对齐或把设置为主轴起点边缘对齐把设置为主轴终点边缘对齐左右两边可能存在多项，那么在把它们两块设置为弹性容器考虑到弹性项目大小可能不一样，可设置为垂直居中。

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">打开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;
}

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="#">使用豆瓣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);
}

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，操作更方便哦

专线服务 idc机房托管 flex布局 html实现手机端移动端布局 web移动端布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1161.html

微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
Vue2.0开发仿豆瓣电影WebApp

摘要：从之前黄轶老师的高仿外卖开始接触过这个滚动库，感觉体验感很好，用起来也比较顺手，所以在后来的项目联系中就一直在使用。前言虽然在此之前已经有类似的仿豆瓣电影的webapp,但或是开发的有些简洁功能不太完善，或是体验感觉得可以再完善下，所以自己摸索着对比豆瓣和豆瓣电影两款app做了一下，初步满足了自己的想法，经过几次完善基本不会出现bug，如果发现存在问题请告诉我修改，谢谢！ 2017...

gplane 2019-08-20 18:14 评论0 收藏0
flex-手机端主页布局实例---构造页面结构

摘要：页面布局实例，成本效果图如下，源码下载在最下面。源码下载提取码样本地址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...

hot_pot_Leo 2019-04-23 11:47 评论0 收藏0
Vue全家桶实现还原豆瓣电影wap版

摘要：豆瓣电影版用全家桶仿写豆瓣电影版。原计划仿写完所有页面，碍于豆瓣的接口有限，实现页面也有限。由于公开的豆瓣接口具有访问次数限制，克隆到本地体验效果更加端访问已设置宽度适配。 douban-movie(豆瓣电影wap版) 用vue全家桶仿写豆瓣电影wap版。最近在公司项目中尝试使用vue，但奈何自己初学水平有限，上了vue没有上vuex，开发过程特别难受。于是玩一玩本项目，算是对相关...

Near_Li 2019-08-20 16:00 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0