CSS3之display:box初探
display:box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。html代码：&div class="box"&
&div class="box1"&&p&1&/p&&/div&
&div class="box2"&&p&2&/p&&/div&
&div class="box3"&&p&3&/p&&/div&
&/div&css代码：.box{
height:200
display:-moz-
display:-webkit-
background:#f60;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
background:#999;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
background:#f00;
}展示效果：展示说明：必须给父容器box定义css属性display:box其子容器才可以进行划分(如果定了display:box则该容器则定义为了内联元素，使用margin:0px auto让其居中是无效的，要想使其居中只能通过它的父容器的text-align:center);分别给box1、box2、box3的box-flex设置了3、2、1，也就是说这三个子容器将父容器wrap的宽度600px分为6份，box1占居父结构宽度的3/6即300px，box2占居父结构宽度的2/6即200px，box3占居父结构宽度的1/6即100px。
------分隔线--------
------分隔线--------
栏目导航List
最新文章Recommend
热点文章Hot
推荐模板Templets
码上送红包CSS3.0盒模型display:的使用[兼容微信浏览器]
话不多说，上代码，关键在对应的低版本安卓的微信，需要-webkit-box对应的-webkit-box-orient -webkit-box-pack等的设置。
/* 设置弹性布局 */
display:-webkit-/* android 2.1-3.0, ios 3.2-4.3 */
display:-webkit-/* Chrome 21+ */
display:-ms-/*
display:/* android 4.4 */
.flex-direction-column{
/* 设置弹性布局的方向，子元素按照在源文档中声明的顺序从上到下显示 */
-webkit-box-orient:/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex-direction:/* Chrome 21+ */
-ms-flex-direction:/* WP IE 10 */
flex-direction:/* android 4.4 */
/* 子元素自动占据剩余的空间 */
-webkit-box-flex:1;/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-flex:1;/* Chrome 21+ */
-ms-flex:1;/* WP IE 10 */
flex:1;/* android 4.4 */
.flex-pack-center{
/* 水平布局下的子元素 水平居中 */
-webkit-box-pack:/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content:/* Chrome 21+ */
-ms-flex-pack:/* WP IE 10 */
justify-content:/* android 4.4 */
.flex-align-center{
/* 水平布局下的子元素 垂直居中 */
-webkit-box-align:/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-align-items:/* Chrome 21+ */
-ms-flex-align:/* WP IE 10 */
align-items:/* android 4.4 */
.flex-pack-justify{
/* 水平布局下的子元素 2端对齐 */
-webkit-box-pack:/* android 2.1-3.0, ios 3.2-4.3 */
-webkit-justify-content: space-/* Chrome 21+ */
-ms-flex-pack:/* WP IE 10 */
justify-content: space-/* android 4.4 */
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467142',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
一个到处闯荡的江湖人士！附加:俺们还是个很典型的双鱼座撒!-v-
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(790)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'CSS3 display：flex和display：box有什么区别',
blogAbstract:'父级元素有display:属性之后。他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。如：',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'一个到处闯荡的江湖人士！附加:俺们还是个很典型的双鱼座撒!-v-',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}