css --- 弹性盒子

左右两侧按1:1自适应,中间固定宽度500px

// CSS
/* 首先定义 container ，关注display  */
/* webkit 是Chrome、Safari 的浏览器前缀 */
.container{margin: auto;display: -webkit-box;width: 80%；height: 200px;
}
/* 开始定义左、中、右 */
.left { -webkit-box-flex: 1; border: 1px dashed black;}
.main {width: 500px; border: 1px dashed black;}
.right {-webkit-box-flex: 1; border: 1px dashed black;}// HTML
<div class="container"><div class="left"></div><div class="main"></div><div class="right"></div>
</div>

很多时候,浏览器可能不支持弹性盒子(如:Opera 和 IE 9及之前版本).我们可以编写兼容性代码如下:

.father{display: -webkit-box;    /* Chrome 和 Safari */display: -o-box;         /* Opera */display: -moz-box;       /* FireFox */display: -ms-box;        /*  IE */display: box;
}
.son_content{-webkit-box-flex: 4; -o-box-flex: 4;-moz-box-flex: 4;-ms-box-flex: 4;box-flex: 4;
}

我们希望,布局能纵向布局,代码如下: (ps:只用改变container,慢慢体会)

// CSS
.container{margin: 30px;display: -web-box;-moz-box-orient: block-axis;-webkit-box-orient: block-axis;-o-box-orient: block-axis;box-orient: block-axis;width: 800px;heigth: 500px;
}

效果如下:

参考《CSS高效开发实战》 P105~P108

css --- 弹性盒子相关推荐

css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
CSS 弹性盒子布局详解
CSS 弹性盒子弹性盒子是CSS3的一种新布局模式.是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 弹性盒子布局是一种在前端HTML开发中比较常用的布局方式,还有 ...
CSS弹性盒子布局——flex布局的基本概念
<CSS弹性盒子布局--flex布局的基本概念> Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和 ...
CSS 弹性盒子布局使用方法介绍
标题 CSS 弹性盒子布局 CSS 属性应用在父容器元素上的CSS属性 1.display: flex | inline-flex; 2. flex-direction 3. flex-wrap 4 ...
【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的基本概念和术语 2. flex 属性: 设置伸缩 ...
css 弹性盒子200304
弹性盒主轴侧轴 display: flex|inline-flex 例子弹性盒子 display:flex 效果相当于让子元素浮动并且让父元素清除了浮动 inline-flex的效果宽度由内容 ...
快速使用CSS 弹性盒子
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...
CSS弹性盒子布局flex
flex布局: flex布局是继标准流布局.浮动布局.定位布局后的第四种布局方式.这种方式可以非常优雅的实现子元素居中或均匀分布,甚至可以随着窗口缩放自动适应.flex布局在浏览器中存在一定的兼容性( ...
css 弹性盒子兼容写法,弹性布局flex 兼容写法
兼容浏览器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 浏览器对最新flexbox规范的支持情况: Chrome 29+ Firef ...

css --- 弹性盒子

css --- 弹性盒子相关推荐

最新文章

热门文章