1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>盒模型display:box;</title>
  7. </head>
  8. <body>
  9.  
  10.   <article class="wrap">
  11.     <section class="section sectionOne">01</section>
  12.     <section class="section sectionTwo">02</section>
  13.     <section class="section sectionThree">03</section>
  14.   </article>
  15.  
  16. </body>
  17. </html>
  1. .wrap {
  2.   width: 600px;
  3.   height: 200px;
  4.   border: 1px solid #000000;
  5.   display: -webkit-box; /*这样元素就会内联化*/
  6.   display: -moz-box;
  7.   display: box;
  8.   -webkit-box-orient:horizontal;
  9.   -moz-box-orient:horizontal;
  10.   box-orient: horizontal;
  11.   -webkit-box-direction: reverse;
  12.   box-direction: reverse;
  13.   -webkit-box-align: center;
  14.   box-align: center;
  15.   /*子容器的水平对其方式*/
  16.   -webkit-box-pack: justify;
  17. }
  18. .section {
  19.   width: 50px;
  20.   height: 80px;
  21. }
  22. .sectionOne {
  23.   background: orange;
  24.   /*
  25.   -webkit-box-flex:1;
  26.   box-flex:1;
  27.   */
  28. }
  29. .sectionTwo {
  30.   background: purple;
  31.   /*
  32.   -webkit-box-flex:2;
  33.   box-flex:2;
  34.   */
  35.   /*margin: 0 50px;*/
  36.   height: 108px;
  37. }
  38. .sectionThree {
  39.   background: green;
  40.   width: 100px;
  41. }

注意：

给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，
都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，
其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，
其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，
其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。

效果：

CSS3盒模型display:box;box-flex:3;的更多相关文章

  1. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  2. CSS3盒模型display初探（display:box/display:flex）

    可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...

  3. CSS3盒模型display:box简述

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...

  4. [转]CSS3盒模型display:box详解

    时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...

  5. css3盒模型学习--利用box自适应布局

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  6. CSS3盒模型display:-webkit-box;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...

  7. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  8. 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用

    提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...

  9. CSS3：布局display属性的flex（弹性布局）

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

随机推荐

  1. 关于android 加载https网页的问题

    我在加载https网页时出现空白, 因此,我就百度一下,可以发现: webView.setWebViewClient(new WebViewClient(){ @Override public voi ...

  2. 【oracle】数据泵expdp与impdp

    1.创建directory create directory dump_dir as 'D:\dump_dir' 2.expdp备份schema expdp system/1qaz2wsx@ETCNC ...

  3. Holographic Remoting

    看到微软官方的 Holographic Remoting Player https://developer.microsoft.com/en-us/windows/holographic/hologr ...

  4. Logical query-processing phases

    Logical query-processing phases in brief (1) FROM This phase identifies the query’s source tables an ...

  5. placeholder js简单实现

    window.onload = function() { var input = document.getElementById("input"); input.onblur = ...

  6. debian下Apache和tomcat整合（使用apt工具）

    最近部署web系统,需要使用tomcat处理和Apache整合使用,tomcat处理JSP,Apache处理静态资源.开始不知道怎么操作,在网上查阅资料走了很多弯路.完成时候,发现其实很简单,现将配置 ...

  7. dictionary 应用（绑定dgv）

    dictionary的用法://初始化添加所有车位进这队列 Utility.Effectlist.Add(); //每触发一次,用这个增加数量 Utility.Effectlist["Car ...

  8. 2015-12-21（box-sizing:border-box）

    最近新学了一个方法box-sizing:border-box,可以忽略margin,padding,border等所要占的位置,比如,你在做响应式网页时,当你所做的网页宽度是符合当前电脑屏幕宽度时,但 ...

  9. java-通过JDBC操作数据库

    一.加载驱动 这里我们用Class.forname();来加载驱动,用此语句会提示排除异常. Class.forName("com.mysql.jdbc.Driver"); 括号中 ...

  10. js正则获取url所带参数值

    在js字符串对象原型中添加这个获取链接参数值方法,getAddrVal(): String.prototype.getAddrVal = String.prototype.getAddrVal||fu ...