比较有意思的是虽然目前没有浏览器支持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. IOS开发--数据持久化篇文件存储(二)

    前言:个人觉得开发人员最大的悲哀莫过于懂得使用却不明白其中的原理.在代码之前我觉得还是有必要简单阐述下相关的一些知识点. 因为文章或深或浅总有适合的人群.若有朋友发现了其中不正确的观点还望多多指出,不 ...

  2. 沉金板VS 镀金板

    沉金板VS 镀金板一.沉金板与镀金板的区别1.原理区别FLASH GOLD 采用的是化学沉积的方法!PLANTINGGOLD 采用的是电解的原理!2.外观区别电金会有电金引线,而化金没有.而且若金厚要 ...

  3. C#全角半角转换函数

    Code#region 全角半角转换 /// <summary> /// 转全角的函数(SBC case) /// </summary> /// <param name= ...

  4. cocos2d-x的初步学习二十一之iosandroid跨平台环境配置

    这篇文章中,我们将来构建下跨平台开发的环境配置,我自己也是参考了别人了文章,折腾了几个小时,尤其是android的配置相对麻烦些.... 参考自子龙山人:http://www.cnblogs.com/ ...

  5. PostgreSQL的 initdb 源代码分析之一

    开始第一段: int main(int argc, char *argv[]) { /* * options with no short version return a low integer, t ...

  6. Chrome插件开发 尝试2

    在文章1中 尝试了开发chrome一个蛋疼的插件,而且必须要写 一坨令人费解的代码才能只能,今天来次清爽的开发:如图: 这是 "清爽模式" →_→ 我把popup.html与pop ...

  7. 【M22】考虑以操作符复合形式（op=）取代其独身形式（op）

    1.对于内置类型,x = x+y 与x+=y的结果相同. 2. x=x+y 与 x+=y的结果相同,但二者做的事情差别很大. a.x=x+y做的事情:方法内有个局部对象,值为x+y,返回局部对象,返回 ...

  8. C# is与as

    1.使用场景: 强制类型转换,有可能会导致异常.is与as就是为了解决这一问题,is与as永远不会抛出异常. 2.is判断一个对象是否兼容于指定的类型,考虑里氏代换.Dog是Animal,而Anima ...

  9. Windows 7系统安装MySQL5.5.21图解

    Win7系统安装MySQL5.5.21图解 大家都知道MySQL是一款中.小型关系型数据库管理系统,非常具有有用性,对于我们学习非常多技术都有帮助,前几天我分别装了SQL Server 2008和Or ...

  10. Android 滑动效果高级篇（八）—— 自定义控件

    自定义控件,较常用View.ViewGroup.Scroller三个类,其继承关系如下: 本示例自定义控件,实现一个Gallery效果,并添加了一个显示View个数和位置的bar条,效果图: 自定义控 ...