CSS3盒模型display:box;box-flex:3;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>盒模型display:box;</title>
</head>
<body> <article class="wrap">
<section class="section sectionOne">01</section>
<section class="section sectionTwo">02</section>
<section class="section sectionThree">03</section>
</article> </body>
</html>
.wrap {
width: 600px;
height: 200px;
border: 1px solid #000000;
display: -webkit-box; /*这样元素就会内联化*/
display: -moz-box;
display: box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient: horizontal;
-webkit-box-direction: reverse;
box-direction: reverse;
-webkit-box-align: center;
box-align: center;
/*子容器的水平对其方式*/
-webkit-box-pack: justify;
}
.section {
width: 50px;
height: 80px;
}
.sectionOne {
background: orange;
/*
-webkit-box-flex:1;
box-flex:1;
*/
}
.sectionTwo {
background: purple;
/*
-webkit-box-flex:2;
box-flex:2;
*/
/*margin: 0 50px;*/
height: 108px;
}
.sectionThree {
background: green;
width: 100px;
}
注意：
给box设置vertical或block-axis属性(此属性是默认值)其效果似乎表现一致，
都可将子容器垂直排列，具体两者有什么实质差别暂时还没有搞清楚。
如果父容器选择vertical或block-axis属性对子容器进行垂直排列，
其是对父容器的高度进行分配划分。此时如果父容器定义了宽度值，
其子容器的宽度值设置则无效状态；如果父容器不设置宽度值，
其子容器的宽度值才有效并且取最大宽度值的子容器的宽度。
效果：
CSS3盒模型display:box;box-flex:3;的更多相关文章
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...
- CSS3盒模型display初探（display:box/display:flex）
可以实现水平等分切割等.日后在研究,做个记录. 首先要声明:display:box,像谷歌浏览器要加前缀识别码:display:-webkit-box; 然后才开始使用其属性,同时也是要带上前缀识别码 ...
- CSS3盒模型display:box简述
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. box-f ...
- [转]CSS3盒模型display:box详解
时间:2014-02-25来源:网络作者:未知编辑:RGB display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布 ...
- css3盒模型学习--利用box自适应布局
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典 的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...
- CSS3盒模型display:-webkit-box;的使用
box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- 移动web开发实践-css3（1）盒模型display:-webkit-box;的使用
提到移动布局不得不提到盒模型display:-webkit-box;这个属性,在移动布局中浮动已经不在重要,相反自适应成为主要的需求,所以display:-webkit-box;变得尤为重要. box ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
随机推荐
- 64位主机64位oracle下装32位客户端ODAC(NFPACS版)
64位主机64位oracle下装32位客户端ODAC(NFPACS版) by dd 1.下载Oracle Data Access Components(ODAC) Xcopy的两个版本: x86:(我 ...
- 对html与body的一些研究与理解
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=259 一.写在前面的最 ...
- MySQL学习笔记02_数据库和表的基本操作
02_1 操作数据库 (1)创建数据库 CREATE DATABASE [IF NOT EXISTS] db_name [create_specification[, create_specifica ...
- MySQL学习笔记01_数据库基础知识
01_1 mysql数据库启动与停止 以<管理员权限>启动cmd: 输入net stop mysql停止mysql服务: 输入net start mysql启动mysql服务: 输入mys ...
- String.Format用法
http://blog.csdn.net/yohop/article/details/2534907 1.作为参数 名称 说明 Format(String, Object) 将指定的 Stri ...
- HDU3948 & 回文树模板
Description: 求本质不同回文子串的个数 Solution: 回文树模板,学一学贴一贴啊... Code: /*================================= # Cre ...
- Spark ZooKeeper数据恢复
Spark使用ZooKeeper进行数据恢复的逻辑过程如下: 1.初始化:创建<CuratorFramwork,LeaderLatch,LeaderLatchListener>用于选举 创 ...
- [Android]依赖注入框架google的dagger
分享一下Android依赖注入框架--Google升级版Dagger2框架 Google的Dagger2是对上一版squareup的Dagger改版,话不多说直接上项目代码. Dagger2源码 Da ...
- java的poi技术写Excel的Sheet
在这之前写过关于java读,写Excel的blog如下: Excel转Html java的poi技术读,写Excel[2003-2007,2010] java的poi技术读取Excel[2003-20 ...
- redis 的理解
1.Redis使用 C语言开发的.Redis 约定此版本号,为偶数的版本是稳定版(如:2.4版 2.6版),奇数版是非稳定版(如:2.5版 2.7版) 2.Redis 数据库中的所有的数据都存储在内存 ...