比较有意思的是虽然目前没有浏览器支持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. Educational Codeforces Round 1(D. Igor In the Museum) (BFS+离线访问)

    题目链接:http://codeforces.com/problemset/problem/598/D 题意是 给你一张行为n宽为m的图 k个询问点 ,求每个寻问点所在的封闭的一个上下左右连接的块所能 ...

  2. Netty笔记

    1 基本介绍 Bootstrap Netty应用程序通过设置 bootstrap(引导)类开始,该类提供了一个用于应用程序网络层配置的容器.Bootstrap有两种类型,一种是用于客户端的Bootst ...

  3. C#学习笔记（三）：值类型、引用类型及参数传递

    值类型和引用类型简介 C#中存在两种数据类型,分别是值类型与引用类型,下面我们来看看这两种类型的区别. 值类型主要包括: 简单类型(如int.float.char等,注意string不是值类型): 枚 ...

  4. 转载“启动\关闭Oracle数据库的多种方法”--来自百度#Oracle

    启动\关闭Oracle数据库的多种方法 启动和关闭oracle有很多种方法. 这里只给出3种方法: l         Sql*plus l         OEM控制台 l         Wind ...

  5. Java Thread Basic

    一.Java的多线程有三种实现方式. 1.继承创建. a.定义子类,重写run方法 b.创建Thread子类的实例(即现成对象) c.调用start() 方法启动现成 特征:不可以共享变量. publ ...

  6. iOS开发-数据持久化

    iOS中四种最常用的将数据持久存储在iOS文件系统的机制 前三种机制的相同点都是需要找到沙盒里面的Documents的目录路径,附加自己相应的文件名字符串来生成需要的完整路径,再往里面创建.读取.写入 ...

  7. Android Touch事件传递机制通俗讲解

    在讲正题之前我们讲一段有关任务传递的小故事,抛砖迎玉下: 话说一家软件公司,来一个任务,分派给了开发经理去完成: 开发经理拿到,看了一下,感觉好简单,于是 开发经理:分派给了开发组长 开发组长:分派给 ...

  8. nginx将http重定向到https

    1.rewrite server { listen 80; server_name test.com; rewrite ^(.*)$ https://$host$1 permanent; } 2. n ...

  9. readonly 关键字的用法

    readonly 关键字是可以在字段上使用的修饰符. 当字段声明包括 readonly 修饰符时,该声明引入的字段赋值只能作为声明的一部分出现,或者出现在同一类的构造函数中. 示例 在此示例中,字段y ...

  10. 添加MIME类型

    #查看站点test01下所有的MIME类型: Get-WebConfiguration -PSPath MACHINE/WEBROOT/APPHOST/test01 -Filter system.we ...