专注WEB开发 分享经验,沉淀知识

H5页面布局方案-flex布局方式

 作者:chenxing  时间:2018-01-16 18:44  阅读:643  评论:

由于flex的这种弹性就非常适合用来布局H5页面

前两天手撸H5页面,在布局方式上走了走弯路。后来遇到了flex成功解决了H5布局上的一些难题。

先上一张写完的H5页面效果图:

H5页面效果

写这篇文章不是介绍flex语法知识,而是我们为什么要选择flex这样的布局方式。

看看flex布局具有哪些优势?简洁,灵活,弹性。为了说明这个优势我特地写了个demo对比感受下,俗话说,“没有对比就没有伤害”。


<style>
    /**公共**/
    *{
        padding: 0;
        margin: 0;
    }
    ul li{
        list-style: none;
    }
    .box{
        max-width: 400px;
        margin: 30px;
        font: 400 14px/22px "微软雅黑";
    }

    /**float 布局**/
    .float-box{
        overflow: hidden;
        padding: 20px;
        background: #eeeeee;
    }
    .float-box li{
        float: left;
        width: 25%;
        text-align: center;
        position: relative;
    }
    .float-box li:first-child:before {
        border-right: none;
    }
    .float-box li:before{
        content: '';
        display: block;
        border-right: 1px solid #999c9e;
        height: 20px;
        position: absolute;
        top: 0px;
        left: 0px;

    }

    /**flex 布局**/
    .flex-box{
        display: flex;
        justify-content: center;
        padding: 20px;
        background: #eeeeee;
    }
    .flex-box li{
        width: 100%;
        text-align: center;
        border-left: 1px solid #999c9e;
    }
    .flex-box li:first-child{
        border-left: none;
    }

</style>
<body>
    <div class="box">
        <h5>浮动布局</h5>
        <ul class="float-box">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单4</li>
        </ul>
    </div>

    <div class="box">
        <h5>弹性布局</h5>
        <ul class="flex-box">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单5</li>
        </ul>
    </div>
</body>

上面分别用浮动和flex来布局菜单栏,效果如下:

float和flex布局

大家可以先不看demo尝试着用这两种布局写菜单布局就能很明显的感觉到flex布局的这些优势。

用文字去描述flex优势之处还是显得有些乏力,姑且说明一下罢。浮动布局在css的代码量上会比flex多,flex完全可以不用考虑长度, 我们只要在flex-box下的元素给一个100%的width,其元素就能按照平均的比例撑开 ,而浮动布局一般需要有固定长度,对长度要求比较严格,多一个像素都有可能破化整体布局。这也是上面的demo中不用li元素的border作为菜单直接的分隔线。

弹性特性还可以从拓展性上看,可以在demo的html中加一个‘菜单5’css样式不动,看结果答案非常明显。

flex弹性特性

由于flex的这种弹性就非常适合用来布局H5页面。

当然末尾还是贴上flex语法基础文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/113.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  119

PHP字符串转数组的三种场景

 2018-05-05 01:32  191

PHP如何遍历字符串?

 2018-05-04 00:56  1072

api接口常见的安全问题和解决方案

 2018-05-03 23:20  880

 最新评论

 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?