比较有意思的是虽然目前没有浏览器支持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. 在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)

    转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...

  2. viPlugin安装破解

    viPlugin是一个eclipse 针对vi的插件,使用此插件可以让你在使用eclipse进行编码时使用几乎所有vi命令,可以极大的提高开发编码效率.  安装  点击你的eclipse中的 help ...

  3. Unity3D之Mecanim动画系统学习笔记（五）：Animator Controller

    简介 Animator Controller在Unity中是作为一种单独的配置文件存在的文件类型,其后缀为controller,Animator Controller包含了以下几种功能: 可以对多个动 ...

  4. 在WinForm中使用Web Service来实现软件自动升级

    来源:互联网 winform程序相对web程序而言,功能更强大编程更方便,但软件更新却相当麻烦,要到客户端一台一台地升级,面对这个实际问题,在最近的一个小项目中,本人设计了一个通过软件实现自动升级技术 ...

  5. 配置DNS服务器IP

    #############################脚本功能及说明#################### #该脚本用来在本地服务器上配置DNS服务器IP #创建时间:2014-10-22 ## ...

  6. 在Linux（Ubuntu/openSUSE/CentOS）下配置ASP.NET（Apache + Mono）转载+补充

    错误:Network error: Connection refused 解决办法: 执行 $sudo apt-get install openssh-server 安装ssh协议 执行ifconfi ...

  7. Note of IOS 7 - Views

    1. Views presentation: A view (an object whose class is UIView or a subclass of UIView) knows how to ...

  8. Servlet---JavaWeb技术的核心基础，JavaWeb框架的基石(二)

    一.Servlet之Request         Web服务器会对收到的每一次客户端http请求分别创建一个用于代表请求的request对象和代表响应的response对象.要获取客户端提交的数据需 ...

  9. POJ 3169 Layout(差分约束啊)

    题目链接:http://poj.org/problem? id=3169 Description Like everyone else, cows like to stand close to the ...

  10. Sales_item例子

    Sales_item.h #ifndef SALES_ITEM_H #define SALES_ITEM_H #include<iostream> #include<string&g ...