一个典型的flex布局,兼容性比较好

html 代码:

<body class="flex-wrap col-flex">
    <header class="midCenter flex-wrap row-flex">我是标题</header>

    <div class="page flex-wrap col-flex">
        <div class="scroll-wrap">
            <section class="midCenter flex-wrap" id="banner">
                <div>我是banner</div>
            </section>

            <section id="quirk" class="flex-wrap row-flex">
                <div></div>
                <div class="flex-wrap col-flex">
                    <div></div>
                    <div></div>
                </div>
            </section>

            <section id="four-col" class="flex-wrap row-flex">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </section>

            <section id="two-col" class="flex-wrap row-flex">
                <div></div>
                <div></div>
            </section>

            <section id="three-col" class="flex-wrap row-flex">
                <div></div>
                <div></div>
                <div></div>
            </section>
        </div>
    </div>

    <footer class="flex-wrap row-flex">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </footer>
</body>

  css代码:

        html{
            height:100%;
        }

        body{
            background: #fff;
            margin:0;
            padding:0;
            width: 100%;
            height: 100%;
        }

        /** 水平伸缩容器**/
        .row-flex{
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            -moz-box-direction: normal;
            -webkit-box-direction: normal;
            -moz-box-lines: multiple;
            -webkit-box-lines: multiple;
            -ms-flex-flow: row wrap;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
        }

        /** 垂直伸缩容器**/
        .col-flex{
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            -moz-box-direction: normal;

            -moz-box-lines: multiple;
            -webkit-box-lines: multiple;
            -webkit-flex-flow: column wrap;
            -ms-flex-flow: column wrap;
            flex-flow: column wrap;
        }

        /** 伸缩容器**/
        .flex-wrap{
            /** 各种版本兼容**/
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
        }

        /** 垂直居中**/
        .midCenter{
            /** 垂直居中核心**/
            -moz-box-pack: center;
            -webkit-box-pack: center;
            box-pack:center;
            -moz-box-align: center;
            -webkit-box-align: center;
            box-align: center;
            box-pack:center;
            -ms-flex-pack:center;
            display: -ms-flexbox;
            -ms-flex-align:center;
            justify-content:center;
            align-items: center;
        }

        /** 占位器**/
        .page{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            overflow: hidden;
        }

        /** 真正滚动**/
        .scroll-wrap{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: scroll;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

        /** 头和尾巴**/
        header,footer{
            background:#f7f7f7;
            height:44px;
        }

        footer>div{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            border:1px solid #666;
            margin:4px;
        }

        section{
            margin:3px 5px;
        }

        /** 真正设置高度 **/
        #banner{
            border:2px solid #999;
            margin:1px;
            height:100px;
        }
        #quirk,#four-col{
            height:150px;
        }
        #three-col,#two-col{
            height:100px;
        }

        /** 内部组件**/
        #four-col>div,#three-col>div,#two-col>div{
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            -webkit-flex: 1;
            flex: 1;
        }
        #four-col>div{
            background: #aaebbe;
            margin:0 2px;
        }
        #three-col>div{
            background: #8f82bc;
            margin:0 2px;
        }
        #two-col>div{
            background: #f7baba;
            margin:0 2px;
        }

        #quirk>div{
            margin:0 2px;
        }

        #quirk>div:nth-child(1){
            background: #b9e2ee;
            -webkit-box-flex: 200;
            -moz-box-flex: 200;
            -ms-flex: 200;
            -webkit-flex: 200;
            flex: 200;
        }

        #quirk>div:nth-child(2){
            -webkit-box-flex: 175;
            -moz-box-flex: 175;
            -ms-flex: 175;
            -webkit-flex: 175;
            flex: 175;

        }
        #quirk>div:nth-child(2)>div:nth-child(1){
            background: #b9e2ee;

            -webkit-box-flex: 60;
            -moz-box-flex: 60;
            -ms-flex: 60;
            -webkit-flex: 60;
            flex: 60;
            margin-bottom: 4px;
        }
        #quirk>div:nth-child(2)>div:nth-child(2){
            background: #b9e2ee;

            -webkit-box-flex: 30;
            -moz-box-flex: 30;
            -ms-flex: 30;
            -webkit-flex: 30;
            flex: 30;
        }

  

时间: 2024-10-17 02:22:58

一个典型的flex布局,兼容性比较好的相关文章

flex布局兼容性问题

一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 2011 version 标志:display: flexbox; or the flex() function or flex-pack property 2012 version 标志:display: flex/inline-flex; and flex-{*} properties 2014 version 新

Flex 布局知识点梳理

传统的布局方案,在针对特殊布局时会很不方便,比如垂直居中,把一个容器等分为N列等等.自从 Flex 出现以后,这些都迎刃而解了,本文对Flex相关内容做一个简单梳理. 什么是 Flex Flex 是 Flexible Box 的缩写,意为"弹性布局",任何一个容器都可以指定为Flex布局.设为 Flex 布局以后,子元素的 float.clear和vertical-align属性将失效.要设置一个元素采用 flex 布局,只需设置器 display 属性取值为 flex 即可. .fl

元素居中之Flex布局

在做页面布局的时候,多多少少都会遇到这个话题,如何使子元素居中于父元素中??? 对于这个问题,方法多种多样,之前也有对这个问题进行总结过,answer应该不少于10种吧.至于使用哪种方法比较好,我觉得这很大程度看个人喜好. 我经常使用的最多也就是一下几种:(以最简单的结构举例,元素宽高略 ) <div class='parent'> <div class=''child></div> </div> 1.定位 .parent{ position:relativ

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3弹性伸缩布局(二)——flex布局

上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法.这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一. 这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果. html代码: <div> <p>发生过的空间还是看价格哈健康啊水

浅谈flex布局中小技巧

最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x.x可以自适应.如下图: 怎么做很简单,两行代码就搞定: justify-content 常用属性有:flex-start | flex-end | center | space-between | space-around 前三个就是字面意思,向行起始位置对齐,向行结束位置对齐,向行中间位置对齐. 后两个中,space-between :元素会平均地分布在行里.如果最

flex布局justify-content属性和align-items属性设置

前言: flex最常用的就是justify-content和align-items了,这里把这两个属性介绍下,大家更多关于flex布局可以查看阮一峰的日志,写的非常清楚! 阮一峰flex布局的日志:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 1.justify-content(在父元素设置)     设置弹性盒子元素在主轴(横轴)的对齐方式. 取值: justify-content: flex-start | flex-end

网页布局——Flex布局

早期时候我们左网站布局的使用表格(table),然后使用浮动(float). 定位(position)和内联块(inline-block),但所有这些方法本质上来讲都是hacks,存留了很多需要实现的重要功能问题(例如,垂直居中). display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实际的测试中display:flex不能完全的替代display:b

flex布局详解

1.背景介绍 传统的布局解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局.(di