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布局以后, ...
随机推荐
- 解决autolt上传图片报错cannot open system clipboard
今天调试代码,发现本地可以上传图片,但是集成环境无法上传报错cannot open system clipboard: 百度查了下,我的系统没有剪切板程序,才报错. 验证方法如下: win+r,输入c ...
- Can't load IA 32-bit .dll on a AMD 64-bit platform错误的解决
64位的系统,64位的myeclipse,64位的jdk,64位的tomcat,结果报错:Can't load IA 64-bit .dll on a AMD 32-bit platform,简直无语 ...
- dedecms 采集规则过滤与替换
过滤与替换常用操作:点击"常用规则",选择要过滤的代码段,再编辑成我们需要的.如果会文章简单采集了,接下来就需要过滤掉采集内容中的广告和链接及其它代码.一般的写法是{dede:tr ...
- 餐厅点餐系统app总结
总结: 三个冲刺已经结束,虽然没有说十分完美,但该实现的功能还是实现了,只是在市场是相较于专业性的缺乏竞争力,从界面到体验都需进一步优化. 每个人的进度不一样,为了同一个任务需要不断的磨合与合作,但慢 ...
- JavaScript中严格模式"use strict";需注意的几个雷区：
1.with语句会抛错误 2.未声明的变量被赋值会报错 3.arguments在严格模式下变为静态,传入的参数与arguments无关系 4.delete会报错 5.对象的重复属性名会报错 6.禁止八 ...
- CodeForces 618A Slime Combining
http://www.codeforces.com/contest/618/problem/A 明明觉得是水题,而我却做了一个小时. 明明觉得代码没有错,而我却错了好几次. 因为我的名字不叫明明,也不 ...
- JavaFX 教程资料收集
1. JavaFX中文资料 http://www.javafxchina.net/blog/docs/tutorial1/ 2. JavaFX入门教程 http://www.xrpmoon.com/c ...
- jQuery 获取屏幕高度、宽度
做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下. alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()) ...
- mysql多字段排序
在对数据库进行查询的时候有时候需要将查询的结果按照某字段升序或者降序排列,甚至有时候需要按照某两个字段进行升降序排列.如果按照某一字段进行排列,只需要在查询语句最后写上 "order by ...
- [IOS] 'Double' is not convertible to 'CGFloat'
在做一个对象旋转的时候,要求转动的弧度角, 这个地方报错,如题的错误,其实是类型转换的问题,swift不能静静的做类型转换,一定要显式的转换 typeTableView?.transform=CGAf ...