CSS3 box-flex属性和box-orient属性
比较有意思的是虽然目前没有浏览器支持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属性的更多相关文章
- CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- CSS3 Flex布局整理(二)-容器属性
一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...
- CSS3 Flex布局整理(三)-项目属性
一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- css3盒模型学习--利用box自适应布局
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典 的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...
- [续更]一起来撸一下Flex布局里面的那些属性
Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那 ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- CSS3 border-radius 属性和CSS outline 属性
CSS3 border-radius 属性 border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性. 提示:该属性允许为元素添加圆角边框! 注释:按此顺序设 ...
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...
- display:flex和display:box布局浏览器兼容性分析
display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀:display:flex是2012年之后的命名.在实 ...
随机推荐
- [iOS基础控件 - 6.10.3] DatePicker & UIToolBar
A.需求 1. 学习DatePicker的基本配置 2.使用TextField召唤指定类型的输入键盘View,这里使用DatePicker 3.给输入键盘上方加上一个UIToolBar,实现如关闭键盘 ...
- HDU 3790 最短路径问题 (最短路)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3790 简单的最短路问题,这题听说有重边.我用spfa和dijkstra写了一遍,没判重边,速度都差不多 ...
- Unity3D之Mecanim动画系统学习笔记(九):Blend Tree(混合树)
认识Blend Tree 我们在Animator Controller中除了可以创建一个State外还可以创建一个Blend Tree,如下: 那么我们看下新创建的Blend Tree和State有什 ...
- INV(库存管理)
物料 PROCEDURE update_item(p_init_msg_list IN VARCHAR2 DEFAULT fnd_api.g_false, x_return_status OUT NO ...
- usr/bin/ld: cannot find 错误解决方法
参考:http://blog.siyebocai.cn/20100324_5p424qs7.html 通常在软件编译时出现的usr/bin/ld: cannot find -lxxx的错误,主要的原因 ...
- libIconv.lib编码库的生成和使用
iconv是将一种编码格式转换为另一种编码格式的开源库,例如可以把Windows环境下通用的ASCii(中文是GB2312)编码转换为国际通用的Unicode编码 iconv最新版本只支持MingW和 ...
- Android提高21篇之一:MediaPlayer
本文介绍MediaPlayer的使用.MediaPlayer可以播放音频和视频,另外也可以通过VideoView来播放视频,虽然VideoView比MediaPlayer简单易用,但定制性不如用Med ...
- Codeforces 278C Learning Languages(并查集)
题意抽象出来就是求联通块的个数吧,然后添加最少边使图联通. 注意所有人都不会任何语言的时候,答案是n而不是n-1. #include<algorithm> #include<iost ...
- Android 进阶学习:事件分发机制全然解析,带你从源代码的角度彻底理解(上)
http://blog.csdn.net/guolin_blog/article/details/9097463 事实上我一直准备写一篇关于Android事件分发机制的文章,从我的第一篇博客開始,就零 ...
- Linux(Debian) vps安装gnome桌面+VNC
昨天转载了一篇关于在Linux VPS上安装xface桌面并VNC连接的文章,因为文章是基于CentOS系统来操作的,有热心读者希望有一个Debian下的类似的东西,这就促成了今天的这篇文字.需要 ...