比较有意思的是虽然目前没有浏览器支持box-flex，box-orient属性，但CSS3问世以来，这两个属性却一直很火。2014年阿里校招第5题要求使用CSS3中的功能实现三个矩形的布局，总的宽度为100%，其中的三个矩形，第一个矩形的宽度是200px,第二个和第三个矩形的宽度相等，给出HTML结构是：

<div class="box">

    <div class="item">column </div>

    <div class="item">column </div>

    <div class="item">column </div>

</div>>

这里所指的CSS3属性包括box-flex和box-orient。由于没有浏览器支持这两个属性，Firefox支持替代的-moz-box-flex，-moz-box-orient属性，Safari,Opera以及Chrome支持替代的-webkit-box-flex,-webkit-box-orient属性。

下面是该题的CSS样式表

 <style type="text/css">

         *{padding: ;margin:}

         .box{

             width: %;

             background: greenyellow;

             box-orient:horizontal;

             -webkit-box-orient: horizontal;

             -ms-box-orient:horizontal;

             -o-box-orient:horizontal;

             -moz-box-orient: horizontal;

             display: -ms-box;

             display: -moz-box;

             display: -webkit-box;

             display: -o-box;

         }

         .box>.item{

             height: 100px;

             background: red;

             margin: 10px 10px 10px ;

             -moz-box-flex:;

             -webkit-box-flex: ;

         }

         .box .item:first-child{

             width: 200px;

             margin-left: 10px;

             -moz-box-flex: 10px;

             -webkit-box-flex: 10px;

         }

     </style>

1  box-flex：

该属性规定框的子元素是否可以伸缩其尺寸（可伸缩元素能够随着框的缩小或扩大而缩小或放大，只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间），主要让子容器对父容器的宽度按一定规则进行划分。如上述代码三个子块的值都是1，也就是每个子块的宽度占1/3,但由于对这道题来说，由于.box .item:first-child{width:200px}对第一个子元素限定为宽度200px,因此第二个和第三个的宽度均为剩下宽度的1/2。

如下图代码

 <html>

 <head>

 <style>

 div

 {

 display:-moz-box; /* Firefox */

 display:-webkit-box; /* Safari and Chrome */

 display:box;

 width:300px;

 border:1px solid black;

 }

 #p1

 {

 -moz-box-flex:1.0; /* Firefox */

 -webkit-box-flex:1.0; /* Safari and Chrome */

 box-flex:1.0;

 border:1px solid red;

 }

 #p2

 {

 -moz-box-flex:2.0; /* Firefox */

 -webkit-box-flex:2.0; /* Safari and Chrome */

 box-flex:2.0;

 border:1px solid blue;

 }

 </style>

 </head>

 <body>

 <div>

 <p id="p1">Hello</p>

 <p id="p2">W3School</p>

 </div>

 <p><b>注释：</b>IE 不支持 box-flex 属性。</p>

 </body>

 </html>

这是W3school中的一个例子红色和蓝色各占总宽度的1/3和2/3。

不知道大家有没有注意，上述示例的父容器的display均为box,为什么呢~因为只有这样子容器才可以进行划分，不过还有点小问题，这时如果使用margin:0 auto在chrome下令子元素居中是比较perfect，但是Firefox下就不行了，别着急，我们可以通过把父容器设置为text-align:center;来化险为夷。

2  box-orient:

他也是一个可伸缩框属性，规定框的子元素是否应该水平或者垂直排列。

CSS3 box-flex属性和box-orient属性的更多相关文章

  1. CSS3 display:flex和display:box有什么区别？

    **区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...

  2. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  3. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

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

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

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

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

  6. [续更]一起来撸一下Flex布局里面的那些属性

    Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...

  7. 原创：新手布局福音！微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  8. CSS3 border-radius 属性和CSS outline 属性

    CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...

  9. Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子

    原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...

  10. display:flex和display:box布局浏览器兼容性分析

    display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...

随机推荐

  1. 搭建nodejs环境推荐用两个工具：nvm和npm

    nvm 是 nodejs version manager 的简称,即:nodejs版本管理npm 是 nodejs package manager 的简称,即:nodejs模块管理 有了这两个工具,管 ...

  2. C#自定义控件的开发：Pin和Connector

    C#自定义控件的开发:Pin和Connector 2009-08-03 14:46 wonsoft hi.baidu 我要评论(0) 字号:T | T 本文介绍了如何使用智能设备扩展C#自定义控件. ...

  3. java 分页

    ListAction.java package com.sy.action; import java.util.List; import com.opensymphony.xwork2.ActionS ...

  4. jsp验证码点击刷新

    <img src="<%=basePath%>manage/code" alt="验证码" height="20" ali ...

  5. C#关于静态与非静态的区别

    C#静态方法与非静态方法的区别不仅仅是概念上的,那么他们有什么具体的区别呢?让我们通过本文向你做一下解析. C#的类中可以包含两种方法:C#静态方法与非静态方法.那么他们的定义有什么不同呢?他们在使用 ...

  6. 教你50招提升ASP.NET性能（十九）：静态集合

    (30)Static collections 招数30: 静态集合 If a collection is static, make sure it only contains the objects ...

  7. update更新两个字段

    update更新两个字段时的sql语句: update tj_record set is_recycle_reprint_guide='1' , recycle__guide_date=now() w ...

  8. 【Objective-C】04-第一个OC程序解析

    说明:这个Objective-C专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序猿,可以高速上手Objective-C.假设你还没有编程经验,或者对Objective-C.iOS开发 ...

  9. DOS命令生成文件列表

    DOS命令窗口,生成文件列表命令格式:dir xmlFiles /b >list.txt dir 文件列表相关命令 xmlFiles 待生成文件所在文件夹,在dos命令窗口根目录下,省略前缀.别 ...

  10. eclipse中Build Path-Add to Build Path相应到androidstudio的设置

    有些时候并不须要加入lib库进行编译,比如在使用xposed的jar包时,仅仅须要在eclipse里Build Path-Add to Build Path就可以,假设作为lib库加入进去反而会出现异 ...