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布局以后, ...
随机推荐
- shixi
1. ./statsite -f statsite.conf &(后台): 2. ps ax|grep ** 3. bg fg 4.chmod +x start.sh 5.tcpdump ud ...
- obj转json
.js模型(JSON)的获取 方法一: 1.安装Python插件.安装完后配置环境变量,path中添加Python路径. 2.找到three.js\utils\converters\obj\conve ...
- Node.js-中文分词【1】-node-segment
node-segment是基于盘古分词写的Node.js中文分词模块,鉴于盘古分词给我留下的好印象,我们在Node.js上选择了它 一.安装node-segment npm install -g se ...
- C语言题目复习前7章重点程序
/** #include <stdio.h> #include <stdlib.h> int max(int n1, int n2) { return (n1 > n2) ...
- Hololens 手势事件执行顺序
InteractionManager_SourcePressed (Filename: C:\buildslave\unity\build\artifacts/generated/Metro/runt ...
- 识别快递单号(2) - 加载图片到canvas
传送门: 识别快递单号(1) - 图像处理 转载请注明出处: http://www.cnblogs.com/zaiyuzhong/p/load-image-to-canvas.html 上篇说到我 ...
- QuanbenSoft Windows Runtime （Windows Store）Apps 应用及其框架总览
Parrot Simple audio repeater for language learners http://www.windowsphone.com/en-au/store/app/parro ...
- ubuntu下安装了express2.5.8,如何更新它?
在ubuntu上通过apt-get install node-express,结果发现它的版本是2.5.8. 想安装express4.0+的版本,一直不能正确安装,所以一时兴起,打算先删掉它,再重新安 ...
- VPB和OSGGIS安装
VPB和OSGGIS安装 转自:http://blog.sina.com.cn/s/blog_668aae780101k6pr.html 第一部分VPB安装 VirtualPlanetBuilder是 ...
- jquery-lazyload延迟加载图片
下载地址:https://github.com/tuupola/jquery_lazyload用法:头部引用<script src="jquery.js" type=&quo ...