css3弹性盒子模型之box-flex

浏览器支持

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属

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>

 注意:以上是按比例数来进行划分的,如果其中一个或多个子容器设置了固定宽度,其它子容器没有设置,那么设置宽度的按宽度来算,剩下的部分再按上面的方法来计算。

.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属性包括:
box-orient, box-direction, box-align, box-pack, box-lines

属性值的具体用法可以参考文档

css3弹性盒子模型之box-flex的更多相关文章

  1. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  2. CSS3弹性盒模型 display:box

    刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应 ...

  3. css3弹性盒子模型——回顾。

    1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: <style&g ...

  4. CSS box-flex属性,然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  5. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  6. CSS3 弹性盒子(Flex Box)

    1 CSS3 弹性盒子(Flex Box) 1 http://caniuse.com/#search=flex%20box https://www.w3.org/TR/css-flexbox-1/ C ...

  7. CSS3弹性盒子(Flex Box)

    CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  8. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  9. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

随机推荐

  1. linux系统状态查看/管理相关命令

    系统状态查看命令: w 查看用户 top 系统进程监控 uptime 查看某台服务器运行了多久 htop 更加先进的交互式监控工具(需要安装) iotop 监控并实时显示磁盘IO输入和输出和程序进程( ...

  2. 关于math.random()的问题

    今天在写一个关于随机数的小程序时,在程序执行时,发现随机数不能执行随机,随机结果始终为1. 下面贴上一开始错误的代码 int i = (int)Math.random()*3+1; 无论运行多少次,结 ...

  3. Percona-Tookit工具包之pt-visual-explain

      Preface       As usual we will check the MySQL executed plan of SQL query by execute "explain ...

  4. python的字典数据类型及常用操作

    字典的定义与特性 字典是Python语言中唯一的映射类型. 定义:{key1: value1, key2: value2} 1.键与值用冒号“:”分开: 2.项与项用逗号“,”分开: 特性: 1.ke ...

  5. Phpstrom开发工具

    下载地址 https://www.jetbrains.com/zh/phpstorm/specials/phpstorm/phpstorm.html?utm_source=baidu&utm_ ...

  6. python 使用生成器 来完成 监听文件输入的例子

    def tail(filename):#函数 f = open(filename,encoding='utf-8') while True: line = f.readline() if line.s ...

  7. 常用数字信号的产生(C实现)-ARMA模型数据生成

    ARMA模型属于信号现代谱估计的范畴,AR模型常用于信号的线性预测.AR模型最后归结为线性方程,MA最后为非线性方程,因此,AR模型使用较多. AR模型最后归结为解Yule-Walker方程,对应矩阵 ...

  8. UVA 1593 Alignment of Code(紫书习题5-1 字符串流)

    You are working in a team that writes Incredibly Customizable Programming Codewriter (ICPC) which is ...

  9. MongoDB从环境搭建到代码编程(Window 环境)

    本人开发环境: window Server 2008 , 64位系统 服务端 MongoDB下载地址:http://www.mongodb.org/downloads  (本人己下好的在百度网盘 : ...

  10. PHP.46-TP框架商城应用实例-后台21-权限管理-权限和角色的关系

    权限和角色的关系 权限功能 角色功能 权限与角色的关联要通过权限-角色表进行{多对多} /********* 角色-权限表 *********/ drop if exists p39_role_pri ...