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布局以后, ...
随机推荐
- Python中的生成器与yield
对于python中的yield有些疑惑,然后在StackOverflow上看到了一篇回答,所以搬运过来了,英文好的直接看原文吧. 可迭代对象 当你创建一个列表的时候,你可以一个接一个地读取其中的项.一 ...
- c#.net网页跳转七种方法
一.目前在ASP.NET中页面传值共有这么几种方式: .Response.Redirect("http://www.hao123.com",false); 目标页面和原页面可以在2 ...
- storm学习好文链接
大圆的那些事:http://www.cnblogs.com/panfeng412/tag/Storm/ xcc的博客:http://blog.csdn.net/damacheng/article/ca ...
- vertical-align和line-height的那些事
可能是又遇到了瓶颈,好长时间感觉css上没什么可看.从来没觉得css有什么难,什么盒模型和各种流也觉得理解起来毫不费力,但好像仅限于此.对一些属性仅限于常用,有时会去做实验验证一些属性,过后就忘了.现 ...
- 【ORACLE】IN 后跟&参数字符串的处理方法
今天写尼日利亚BOSS,数据修复脚本时遇到一个问题, 参数字符串无法再IN中使用,例如:想要完成下面的查询 select * From customeren c where c.customercod ...
- 基础2.通过Ajax获得servlet数据（最基础）
案列一:从服务器的得到输出的数据 Jsp界面 <script type="text/javascript" src="test.js"></s ...
- python 函数之day3
一 函数的语法及特性 什么是函数? 定义:函数是一个功能通过一组语句的集合,由名字(函数名)将其封装起来的代码块,要想执行这个函数,只要调用其函数名即可. 特性: 减少重复代码 使程序变的可扩展 使程 ...
- keepalived 原主上线时vip漂移情况
1. 设置为MASTER,BACKUP 优先级相同 的情况: master端的keepalived起来就会获取到vip变成主. 2. 设置为BACKUP,BACKUP 一个优先级高一个优先级低 的情况 ...
- 设置DataGridView的某个单元格为ComboBox
怎么将DataGridView的 某个单元格设为ComboBox的样式而不是整列都改变样式? 1.最简单的方法:利用DataGridView提供的DataGridViewComboBoxCell. 写 ...
- jQuery代码节选（筛选）
筛选...8.not()<p class="p1">1</p><p class="p2">2</p><p ...