css3 box-flex
应用地址:http://www.jb51.net/css/467291.html
box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高、水平均分、按比例划分。但是它有一定的局限性,在firefox、chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz)、chrome(-webkit)。
一、box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分。
- <div class="box">
- <div class="col_1">111</div>
- <div class="col_2">222</div>
- <div class="col_3">333</div>
- </div>
- <style type="text/css">
- .box {
- display:box;
- display:-webkit-box;
- display:-moz-box;
- background-color:#fff;
- width:500px;
- height:100px;
- border:1px solid #333;
- margin:0 auto;
- }
- .col_1 {
- box-flex:1;
- -moz-box-flex:1;
- -webkit-box-flex:1;
- background-color:#ffc;
- }
- .col_2 {
- background-color:#ccf;
- box-flex:2;
- -moz-box-flex:2;
- -webkit-box-flex:2;
- }
- .col_3 {
- background-color:#fcf;
- box-flex:2;
- -moz-box-flex:2;
- -webkit-box-flex:2;
- }
- </style>
注意: 父容器必须定义为display:box,其子容器才可以进行划分(如果定了display:box则该容器为内联元素,使用margin:0 auto让其居中在firefox下无效,需要通过父容器的text-align:center;来控制。但在chrome下是可以的) 上面所讲到的例子中,三个子块分别设置了1、2、2,也就是把这个父容器分成5份,分别占据了父结构宽度的1/5(100px)、2/5(200px)、2/5(200px)。 以上是按比例数来进行划分的,如果其中一个或多个子容器设置了固定宽度,其它子容器没有设置,那么设置宽度的按宽度来算,剩下的部分再按上面的方法来计算。
- .col_3 {
- background-color:#fcf;
- width:50px;/*设置宽度为50px*/
- }
当子容器中需要有间隔的时候,他们平分的宽度需要减去中间的margin,然后再按比例平分。
- .col_2 {
- background-color:#ccf;
- box-flex:2;
- -moz-box-flex:2;
- -webkit-box-flex:2;
- margin:0 20px;
- }
二、box属性 上面讲到的是如何将box-flex如何对父容器的宽度进行划分,现在来说一下父容器里面的box属性包括哪些。 box-orient, box-direction, box-align, box-pack, box-lines 1、box-orient box-orient用来确定父容器里子容器的排列方式是水平还是垂直,可选属性如下: horizontal | vertical | inline-axis | block-axis | inherit horizontal和inline-axis属性其效果表现一致,都可以将容器水平排列,在默认情况下也呈现水平排列的样式。当父容器设置高度时,在firefox下面其子容器的高度无效,但chroma下面则有效。
- .col_1 {
- height:50px;
- }
- .col_2 {
- height:80px;
- }
如果你容器不设置高度,子容器的高度值才生效,在firefox下面他们的高度取其中的最大值。而chrome下面设置高度的子容器为自己的高度,未设置的其高度和最大值的高度一样,其实就是和父容器的高度一致。
- .box {
- /*未设置高度*/
- }
- .col_1 {
- height:50px;
- }
- .col_2 {
- height:80px;
- }
- .col_3 {
- /*未设置高度*/
- }
vertical和block-axis属性效果表现一致,都可将子容器垂直排列。他们是对父容器的高度进行分配。如果子容器设置了宽度,也是谷歌下面有效,火狐无效,其它都与horizontal表现一致。
2、box-direction box-direction用来确定父容器里面的子容器排列顺序,具有以下属性: normal | reverse | inherit normal是默认值,如上面测试结果。 reverse表示反转,其表现方式跟normal相反,呈现为3、2、1
3、box-align box-align表示父容器里面子容器的垂直对齐方式,属性值为: start | end | center | baseline | stretch start、baseline展示效果
end展示效果
center展示效果
stretch展示效果,(谷歌下面如start)
4、box-pack box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示: start | end | center | justify css代码
- .box {
- display:box;
- display:-webkit-box;
- display:-moz-box;
- background-color:#fff;
- width:500px;
- border:1px solid #333;
- margin:0 auto;
- height:100px;
- -webkit-box-pack:start;
- -moz-box-pack:start;
- box-pack:start;
- }
- .col_1,.col_2,.col_3{
- width:100px;
- }
start:在box-pack表示水平居左对齐,如下所示:
end:在box-pack表示水平居右对齐,如下图所示
center:在box-pack表示水平居中对齐,如下图所示
justify:在box-pack表示两边对齐试
css3 box-flex的更多相关文章
- CSS3 display:flex和display:box有什么区别?
**区别**,仅是各阶段草案命名.- W3C 2009年第1次草案:[display:box;](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723 ...
- 使用css3的Flex布局实现列表展示
实现效果图如下: 通过css3样式实现(部分代码): .box { display: flex; flex-wrap:wrap; justify-content:space-between; alig ...
- CSS3的flex布局
flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度 伸缩项目的flo ...
- 浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 一.使 ...
- box flex 弹性盒模型(转载)
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- 彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- 第103天:CSS3中Flex布局(伸缩布局)详解
一.Flex布局 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. .box{ display: flex; } 行 ...
- css3 box
一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...
- CSS3:flex布局应用
想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...
- css3属性flex弹性布局设置三列(四列)分布样式
参考:阮一峰的网络日志 <!doctype html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- ECMA Script 6_Symbol() 唯一类型值声明函数_Symbol 数据类型
Symbol 数据类型 let s = Symbol(); typeof s; // "symbol" 是 ES6 继 Number,String,Boolean,Undefine ...
- poj1106
极角排序扫一圈. 今天没什么状态写个水题减轻负罪感(大雾) #include <cstdio> #include <cmath> #include <cstring> ...
- [Codeforces Round #438][Codeforces 868C. Qualification Rounds]
题目链接:868C - Qualification Rounds 题目大意:有\(n\)个题目,\(k\)个人,每个人可能做过这\(n\)个题里的若干道,出题方要在这\(n\)个题目里选若干个出来作为 ...
- 模板设计在tomcat中的应用
tomcat是一个常见的web容器,用户使用它可以很方便地管理servlet小程序,而servlet与tomcat的交互代码设计就用到了模板设计. 何谓模板设计,就是定义一个抽象父类,在该父类中组织子 ...
- 如何设置默认以管理员权限运行cmd
设置cmd以管理员权限运行 目的:创建或删除文件等命令时,需要管理员权限运行cmd(linux以root用户登录). 例如,创建日志目录. 方法一: 1.激活administrator用户 2 ...
- SVN 服务器端权限管理
创建用户 点击菜单上的Users可以在右侧窗口区域中看见已经创建的用户 创建组 同样也可以修改组: 分配权限 示例一:开发人员拥有读写权限(组权限) 进入权限分配界面: 添加组或用户: 在添加页面可 ...
- Git最牛最全详解
阅读目录 Git是什么 SVN与Git的最主要的区别 在windows上如何安装Git 如何操作 创建版本库 把文件添加到版本库中 版本回退 理解工作区与暂存 ...
- CDI feature
CDI Java EE的上下文和依赖注入(Contexts and Dependency Injection for Java EE,CDI),CDI是即将完成的Java EE 6平台的关键组成部分, ...
- webpack(6)-模块热替代&tree shaking
模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...
- Percona-Toolkit 之 pt-table-sync 总结
pt-table-sync - Synchronize MySQL table data efficiently. pt-table-sync synchronizes data efficientl ...