CSS3之弹性布局
flexbox是CSS3提出的页面布局模块。flexbox可以把列表横向或者纵向排列，并且填满可以延伸到的空间。稍微复杂的布局可以通过嵌套flex container来实现。
利用flexbox可以方便的创建弹性布局，这使得在移动设备上，可以让元素在容器内扩展和收缩，更容易的实现常见布局，如三列布局。
弹性容器和弹性块
一个flex container中包含了left content right三个弹性块。
可以设置display为flex让块变为弹性块。
可以设置flex-flow来确定弹性块的布局方向，设置为row，横向布局，设置为cloumn,纵向布局：
弹性块可以多行或单行排列。可以设置wrap让其多行排列，如图：
横向布局需要指定各块的宽度，可以为固定宽度，如300px,也可设置为比例宽度，如flex:1,含义是占除指定了width之外的剩余空间的N分之一的宽度，N是总份数。
其高度是弹性容器的高度。
如图：
纵向高度是类似的情况。
一个综合例子：
<!DOCTYPE html>
<html>
<head>
<style>
.container{
background:#a1a1a1;
display:flex;
flex-flow:row;
height:500px;
}
.main {
width: 60%; }
.left {
flex: 1;
background:pink;
}
.right {
flex: 2;
background:pink;
}
</style>
</head>
<body> <div class="container">
<nav class="nav left">…</nav> <section class="main">
Winter comes after autumn.It snows heavily here....
</section> <nav class="nav right">…</nav> </div>
</body>
</html>
效果：
浏览器支持：为了更广泛的支持浏览器，需要考虑添加支持老语法版本的flexbox.上述例子在FF23.0.1运行OK。
参考英文文档：http://helephant.com/2013/03/23/css3-flexbox-layout/
CSS3之弹性布局的更多相关文章
- css3 FlexBox 弹性布局
Flex 弹性布局 这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, ...
- CSS3 flexbox弹性布局实例
常用例子 1.居中对齐 <!DOCTYPE html> <head> <meta charset="utf-8"> <style type ...
- CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3支持box-flex弹性布局
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- 【repost】CSS3弹性布局
本文导读:在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理.使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据 ...
- CSS3：布局display属性的flex（弹性布局）
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- CSS3中的Flexbox弹性布局（一）
CSS3引入了一种新的布局模式——Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
随机推荐
- 黄聪：WordPress 函数：apply_filters()（创建过滤器）
apply_filters() 函数用来创建一个过滤器,大多数被用在函数中,是 WordPress 插件机制中非常重要的一个函数,能让其它的主题和插件对一个值进行修改过滤. 用法 apply_filt ...
- NeHe OpenGL教程 第十六课：雾
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- 基于jquery的表单校验插件 - rjboy的Validform使用体验
官方地址:http://validform.rjboy.cn/document.html 引用js后再加上以下css就可以使用了 .Validform_checktip{ margin-left:8p ...
- JAVA 图形界面 JFrame容器
一.图像化界面必须引入包 //引入图形化界面包 import java.awt.*; import javax.swing.*; 二.源代码 //窗口 import java.awt.*; impor ...
- Tomcat启动过程原理详解
基于Java的Web 应用程序是 servlet.JSP 页面.静态页面.类和其他资源的集合,它们可以用标准方式打包,并运行在来自多个供应商的多个容器.Web 应用程序存在于结构化层次结构的目录中,该 ...
- Java多线程之join
1.join方法只有在继承了Thread类的线程中才有. 2.线程必须要start() 后再join才能起作用. 将另外一个线程join到当前线程,则需要等到join进来的线程执行完才会继续执行当前线 ...
- Git中的文件状态和使用
(暂存区 即Index In Git) commit 到 local respository的内容,不想push,则使用git reset 将文件状态回转到staged|modified|unstag ...
- Eclipse中Build Workspace 优化
在开发中,发现eclipse 的 Build Workspace 很慢很慢,只要是由于验证js, css, xml 等等静态的文件导致. 我遇到的问题是,项目中有一个js文件很大,怎么都不能Build ...
- 基于NPOI的Execl导入导出例子
源地址:http://bbs.csdn.net/topics/390830774
- 打开FTP服务器上的文件夹时发生错误,请检查是否有权限访问该文件夹
打开FTP服务器上的文件夹时发生错误,请检查是否有权限访问 在win98,winme,win2000,win2003下都能正常上传文件夹,但在winxp+sp2下同样的文件夹就可能出现问题 1. 打开 ...