1. 使用自适应的窗口弹性盒布局

    可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。

     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试</title>
    <style>
    /*弹性盒布局*/
    #container{
    display: -webkit-box;
    display: -moz-box;
    }
    #left-sidebar{
    width: 200px;
    padding: 20px;
    background-color: orange;
    }
    #content{
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: yellow;
    }
    #right-sidebar{
    width: 200px;
    padding: 20px;
    background-color: limegreen;
    }
    #left-sidebar, #content, #right-sidebar{
    box-sizing: border-box;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    </div>
    </body>
    </html>
  2. 改变元素的显示顺序

    box-ordinal-group可以改变各个元素的显示顺序。

     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试</title>
    <style>
    /*弹性盒布局*/
    #container{
    display: -webkit-box;
    display: -moz-box;
    }
    #left-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    width: 200px;
    padding: 20px;
    background-color: orange;
    }
    #content{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: yellow;
    }
    #right-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
    }
    #left-sidebar, #content, #right-sidebar{
    box-sizing: border-box;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    </div>
    </body>
    </html>
  3. 改变元素的排列方向

    使用box-orient改变多个元素的排列方向。

     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试</title>
    <style>
    /*弹性盒布局*/
    #container{
    display: -webkit-box;
    display: -moz-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    }
    #left-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    width: 200px;
    padding: 20px;
    background-color: orange;
    }
    #content{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: yellow;
    }
    #right-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
    }
    #left-sidebar, #content, #right-sidebar{
    box-sizing: border-box;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    </div>
    </body>
    </html>
  4. 元素宽度与高度的自适应

    虽然使用盒布局时,元素的高度与宽度具有了一定的适应性,但是容器中总还是会留出一大片空白区域。

  5. 使用弹性盒布局来消除空白

    使用弹性盒布局可以消除盒布局残留的空白问题。

     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试</title>
    <style>
    *{
    box-sizing: border-box;
    margin: ;
    }
    html, body{
    width: %;
    height: %;
    }
    /*弹性盒布局*/
    #container{
    display: -webkit-box;
    display: -moz-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    border: 2px solid black;
    width: %;
    height: %;
    }
    #left-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    width: 200px;
    padding: 20px;
    background-color: orange;
    }
    #content{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: yellow;
    }
    #right-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    width: 200px;
    padding: 20px;
    background-color: limegreen;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    </div>
    </body>
    </html>
  6. 对多个元素使用box-flex属性

    如果每个div元素都有box-flex,那么每个元素的宽高等于容器宽高的1/n。容器的空白部分根据box-flex的属性值进行分配。

    示例代码:

     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试</title>
    <style>
    *{
    box-sizing: border-box;
    margin: ;
    }
    html, body{
    width: %;
    height: %;
    }
    /*弹性盒布局*/
    #container{
    display: -webkit-box;
    display: -moz-box;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    border: 2px solid black;
    width: %;
    height: %;
    }
    #left-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: orange;
    }
    #content{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: yellow;
    }
    #right-sidebar{
    -moz-box-ordinal-group: ;
    -webkit-box-ordinal-group: ;
    -moz-box-flex: ;
    -webkit-box-flex: ;
    padding: 20px;
    background-color: limegreen;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>
    </div>
    </body>
    </html>
  7. 指定水平方向与垂直方向的对齐方式

    可以使用box-pack属性及box-align属性来指定元素中文字、图片水平或垂直方向的对齐方式。

    示例代码:

     <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>测试</title>
    <style>
    *{
    box-sizing: border-box;
    margin: ;
    }
    html, body{
    width: %;
    height: %;
    }
    /*弹性盒布局*/
    #container{
    display: -webkit-box;
    display: -moz-box;
    -moz-box-align: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    border: 2px solid black;
    width: %;
    height: %;
    }
    #content{
    display: -webkit-box;
    display: -moz-box;
    -moz-box-align: center;
    -webkit-box-align: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    width: %;
    height: %;
    padding: 20px;
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="container">
    <div id="content">示例文字。</div>
    </div>
    </body>
    </html>

CSS3弹性盒布局的更多相关文章

  1. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  2. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

  3. CSS3弹性盒布局方式

    一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的 ...

  4. CSS3 弹性盒布局

    一.伸缩布局 CSS3 在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 二.定义 Flexbox 语法格式: di ...

  5. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

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

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  7. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  8. 响应式布局(CSS3弹性盒flex布局模型)

    传统的布局方式都是基于盒模型的 利用display.position.float来布局有一定局限性 比如说实现自适应垂直居中 随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型 flex弹性布 ...

  9. CSS3与弹性盒布局

    1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html& ...

随机推荐

  1. c++11 perfect forwarding

    完美转发是c++11 引入右值引用之后,在template 中的延伸. 顾名思义,完美转发是将参数不改变属性的条件下,转发给下一个函数. 因为普通函数的参数一旦具名,始终都是lvalue. 如果把rv ...

  2. 2016级算法第一次练习赛-A.群鸦的盛宴

    858 群鸦的盛宴 题目链接:https://buaacoding.cn/problem/858/index 思路 本题乍一眼看过去,你可能会想到使用一个二维数组A[51][51]来记录从i到j的路线 ...

  3. MySQL授权命令grant的详细使用方法

    2019-01-07 转自 https://www.cnblogs.com/crxis/p/7044582.html 本文实例,运行于 MySQL 5.0 及以上版本. MySQL 赋予用户权限命令的 ...

  4. vue项目页面空白

    vue项目页面空白 今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login 能访问 里面确实空白的 错误: 错误原因: ...

  5. Ionic3,装饰器(@Input、@ViewChild)以及使用 Events 实现数据回调中的相关用法(五)

    标题栏的渐变效果 使用到的相关装饰器.Class以及相关方法:@Input.@ViewChild.Content.ionViewDidLoad ① @Input 装饰器:用来获取页面元素自定义属性值. ...

  6. 07-oracle多表查询

    --笛卡尔积,多表查询时,n张表中的行数相乘(本例中14*4=56)--多表查询时笛卡尔积无法消除,即使使用了限定条件(where)也只是不显示而已,实际上笛卡尔积仍存在 --只能使用合理的做法来处理 ...

  7. mysql 02

    CREATE TABLE emp(eid INT,ename VARCHAR(20),egender CHAR(2),ebirthday DATE,eemail CHAR(10),eramark VA ...

  8. Rational Rose2007下载和安装

    网上关于Rational Rose2007安装包,网上找了一堆大多都是垃圾,最后找到一个可用的(带激活文件),保存在自己的网盘里,这里分享出来:https://pan.baidu.com/s/1bpb ...

  9. Oracle dbms_random随机函数包

    dbms_random是oracle提供的一个随机函数包,以下是它的一些常用的功能: 1.dbms_random.value 作用:生成一个大于等于0,大于等于1的随机的38位小数,代码如下: sel ...

  10. android httpclient 发送 PATCH 请求

    Put 用于全部更新 Patch 用于部分更新 重写一下 HttpPut 或 HttpPost 的 getMethod 方法 /** * Send a patch request */ public ...