css3弹性盒子模型
当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代。所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model)。
弹性盒模型可以水平布局,可以垂直布局,还可以调换顺序,可以设置不等的百分比等。
1.弹性盒子column分栏
<h2>1.弹性盒子column分栏</h2>
<div class="freebox">
<img src="data:image/moon.jpg" alt="天宫二号" /> 9月15日晚10点04分,八月十五中秋节夜晚,甘肃酒泉,天宫二号飞行器发射升空。在酒泉卫星发射中心,一轮满月周围惊现一圈月晕,这为即将升空的火箭背景加分不少。(图片来源:东方IC)
<p>
这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻.
</p>
<p>
这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻,这是一段新闻.
</p>
</div>
/*弹性盒子分栏*/ .freebox {
-webkit-column-count:;
-webkit-column-rule-style: dotted;
-webkit-column-gap: 30px;
-moz-column-count:;/*兼容火狐浏览器*/
-moz-column-rule-style: dotted;
-moz-column-gap: 30px;
column-count:;/*兼容原生css*/
column-rule-style: dotted;
column-gap: 30px;
margin: 10px auto;
} div img {
width: 320px;
height: 200px;
} div p {
text-indent: 30px;
}
效果:
这个方法虽然非常好用,一句代码就能实现完美分栏,但是兼容性不佳,火狐,谷歌等浏览器都还处于试验阶段。
了解即可,不宜过分依赖,下面几种方法一样。
2.旧版弹性盒子居中布局
<!-- 旧版弹性盒子居中布局 -->
<h2>2.旧版弹性盒子居中布局</h2>
<div class="centerimg">
<img src="data:image/moon.jpg" alt="天宫二号" />
</div>
/*旧版弹性盒子居中布局*/ .centerimg {
width: 600px;
height: 400px;
margin: 10px auto;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
background: #a7ffa7;
}
效果:
3.新版弹性盒子排序
<!-- 新版弹性盒子排序 -->
<h2>3.新版弹性盒子排序</h2>
<div class="contant_row">
<div class="first">
1号盒子排第三(-webkit-order:3)
</div>
<div class="second">
2号盒子排第一(-webkit-order:1)
</div>
<div class="third">
3号盒子排第二(-webkit-order:2)
</div>
</div>
<div class="contant_column">
<div class="first">
1号盒子排第三(-webkit-order:3)
</div>
<div class="second">
2号盒子排第一(-webkit-order:1)
</div>
<div class="third">
3号盒子排第二(-webkit-order:2)
</div>
</div>
/*新版弹性盒子排序*/ .contant_row {
width: 600px;
height: 200px;
margin: 10px auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
border: 1px solid #f00;
} .contant_column {
width: 600px;
height: 200px;
margin: 10px auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
border: 1px solid #f00;
} .first {
width: 100px;
height: 100px;
-webkit-flex:;
-moz-flex:;
flex:;
-webkit-order:;
-moz-order:;
order:;
color: #fff;
background: red;
} .second {
width: 100px;
height: 100px;
-webkit-flex:;
-moz-flex:;
flex:;
-webkit-order:;
-moz-order:;
order:;
color: #fff;
background: green;
} .third {
width: 100px;
height: 200px;
-webkit-flex:;
-moz-flex:;
flex:;
-webkit-order:;
-moz-order:;
order:;
color: #fff;
background: blue;
}
效果:
css3弹性盒子模型的更多相关文章
- css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
- css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: <style&g ...
- CSS3中的弹性盒子模型
介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...
- CSS3弹性盒模型flexbox布局基础版
原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- flexbox弹性盒子模型
这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...
- CSS box-flex属性,然后弹性盒子模型简介
今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...
- CSS box-flex属性,然后弹性盒子模型简介(转)
一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...
随机推荐
- PostgreSQL数据库基本配置
一.安装 首先安装PostgreSQL客户端: sudo apt-get install postgresql-client 然后,安装PostgreSQL服务器: sudo apt-get inst ...
- Apache Jena - A Bootstrap
前言 这篇文档属探究立项性质,作为语义网和本体建模工作的延续. 依照NoSQL Distilled上的考察方法,将Apache Jena作为图数据库的泛型考察. 内容 多种出版物上声明主要有四类N ...
- codeforces194a
link:http://codeforces.com/contest/334/problem/A 很有意思的一道构造题.发现CF上经常出这种不难但是很不错的构造题. #include <iost ...
- AndroidStudio 中的坑Error:(1, 0) Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRID
将 build.gradle 中 的 classpath改为2.0.+ dependencies { classpath 'com.android.tools.build:gradle:2.0.+'然 ...
- C++宽窄字符串转换
首先,贴出我给出的解决方案: http://files.cnblogs.com/xuejianhui/utils.rar 再则,贴出网上最常见的例子: #include <string> ...
- 论文笔记之:Dueling Network Architectures for Deep Reinforcement Learning
Dueling Network Architectures for Deep Reinforcement Learning ICML 2016 Best Paper 摘要:本文的贡献点主要是在 DQN ...
- ubnt+ros 接入无线
ubnt+ros 接入无线 一.ubnt配置(UBNT NanoStation LOCOM2 LOCO M2)1.ubnt接poe,转lan接到pc2.ubnt默认ip是192.168.1.20,用户 ...
- urllib2.open(req).read() 报403的错误:怎么办?
http://www.douban.com/group/topic/18095751/ heads = {'Accept':'text/html,application/xhtml+xml,appli ...
- [转]SQLServer2008日志文件无法收缩处理方法
问题描述 发现有的数据库日志文件太大,无论如何收缩执行几次SQL语句都不行.事务日志达30+G,而且使用常规的截断.收缩方法均无法减小日志物理文件的尺寸,经过一番寻找,终于找到了解决方法. 查 ...
- Action、Action<T>、Func<T> 匿名函数的写法
void ht_HLB_Set(Dictionary<int, int> dic) { //匿名函数 Action<int> fun = (int jhShare_Iid) = ...