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. git使用简介(一)

    附上廖雪峰老师Git教程https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 创建版本 ...

  2. Java的内存--存储(1)

    有次去面试,面试官突然问我这个问题,当时我只知道怎么写最优化,但是具体不知道为什么那样写,身价立马下降哦 1. 以下开发习惯,你怎么看? for(int i=0;i<2;i++){ Person ...

  3. 重置mysql5.7.25临时密码

    安装完mysql之后,登陆以后,不管运行任何命令,总是提示这个:mac mysql error You must reset your password using ALTER USER statem ...

  4. jsp+spring+jquery+ajax的简单例子

    初学b/s编程,花费了许多时间,进度颇慢! 不过终于完成了一个简单的例子: jsp代码 <%@ page language="java" contentType=" ...

  5. [Git add . ] 遇到The file will have its original line endings in your working directory 解决办法

    1.在新项目中使用[ git add . ]时出现: warning: LF will be replaced by CRLF in ...... The file will have its ori ...

  6. 基于pyecharts的IT各行业薪资展示

    我们的项目是一个信息采集系统,采集的是51job招聘网站,我爬取了Python,Java,C++,PHP还有北京各地区的职位数量,以及经验要求,和学历要求等等. 网页头; <!DOCTYPE h ...

  7. python3 练习题100例 (二十四)打印完数

    完数:一个数如果恰好等于它的因子之和,这个数就称为"完数".例如 6 = 1+2+3. 题目内容: 输入一个正整数n(n<1000),输出1到n之间的所有完数(包括n). 输 ...

  8. Scrapy之Cookie和代理

    cookie cookie: 获取百度翻译某个词条的结果 一定要对start_requests方法进行重写. 两种解决方案: 1. Request()方法中给method属性赋值成post2. For ...

  9. C语言实现计算二进制数字1的个数

    #include<stdio.h> #include<stdlib.h> int print_one_bits01(unsigned int value){ //0000 11 ...

  10. n点游戏

    n点游戏 24点游戏是非常经典而简单的小游戏,从一堆扑克牌中抽取4张,向其中添加运算符号并使其运行结果恰等于24,这叫作24点游戏. 现在我们不再是组合24,而是组合出给定的数字n,但要求只可以利用任 ...