Flexbox介绍
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了盒模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。
最大的特点就是弹性（弹弹弹，弹掉鱼尾纹~~），就不用为了一个水平排列到处float了。。
一 基本概念
flex-box是css3的一个模块，不是一个属性，它涉及到很多东西，包括很多属性。主要包括两大部分：一个容器（flex container）和许多的子元素（flex items）。
看下图，了解一些概念。
main axis：主轴方向
main start | main end：主轴开始和主轴结束。两者定义了flex items主轴方向上的布局范围。
cross axis：横轴方向
cross start | cross end：横轴开始和横轴结束，两者定义了flex item横轴方向上的布局范围。
需要注意的是主轴和横轴不是绝对的，取决于flex-direction的设置，见下文。
main size：flex item主轴方向上的宽度
cross size：flex item横轴方向上的宽度
下面分别来看flex container和flex items的相关属性。
二 flex container
1 通过设置display属性为flex或者inline-flex来定义弹性容器，即flex container。
.container {
display: flex; /* or inline-flex */
}
2 设置主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row：默认，从左到右
row-reverse：从右到左
column： 从上到下
column-reverse：从下到上
3 强制换行
默认情况下，容器将子元素始终在一行排列。但你也可以设置换行。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
4 flex-flow，flex-direction和flex-wrap的简写
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
5 设置主轴排列
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start: 紧靠main start依次排列
flex-end：紧靠main end依次排列
center：居中
space-between：充满main size，最两边的紧贴main start和main end
space-around：充满main size，根据子元素的个数，每一部分子元素居中（估计没说明白orz）
6 设置横轴排列
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
7 多行设置
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
这个很像justify-content，不过需要出现多个flex container的时候设置这个属性才有效
三 flex items
1 设置排列顺序，数字越大，显示的越靠后。
.item {
order: <integer>;
}
2 设置占用空间
.item {
flex-grow: <number>; /* default 0 */
}
有了这个属性，可以随意设置子元素所占父元素的宽度。
3 设置伸缩比
.item {
flex-shrink: <number>; /* default 1 */
}
4 flex-basis 主轴方向的默认宽度
.item {
flex-basis: <length> | auto; /* default auto */
}
5 flex属性，上面三个的缩写
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
建议使用flex属性。
6 设置排列，类似align-items
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注：在flex-items里，float, clear 和 vertical-align 均没有效果。
介绍了这么多，可以去这里一个一个属性的试验效果：http://runjs.cn/code/zr67ihch
下面来看个例子：
实现这样的效果，布局的经典实例。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background-color: #ff6347;
}
.main {
background-color: #ffd700;
}
.aside-1 {
background-color: #00bfff;
}
.aside-2 {
background-color: #ff69b4;
}
.footer {
background-color: #90ee90;
}
@media all and (min-width: 600px) {
.aside {
flex: 1 auto;
}
}
@media all and (min-width: 800px) {
.main {
flex: 2 0;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
这里的布局是移动优先的，首先布局的是移动设备显示的，然后分别定义大于600px和大于800px时的显示。
到这里看源码：http://runjs.cn/code/tt7kilpk
到这里看更多的示例： A Complete Guide to Flexbox
flex-box已经更新三个规范，浏览器支持情况如下：
问题来了，如何支持各种浏览器呢？最好的方法就是使用Autoprefixer。
另外flex-box有一些bug，看这里：https://github.com/philipwalton/flexbugs
最后盗一张图：
参考：
A Complete Guide to Flexbox 大部分内容翻译于此
Flexbox，更优雅的布局 这篇文章介绍内部的原理
Flexbox介绍的更多相关文章
- React Native之FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- React-Native 之 FlexBox介绍和使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- RN 的页面布局
从 https://blog.csdn.net/liangzelei/article/details/53965417转载 React Native布局详细指南 https://www.jiansh ...
- 转:CSS3 Flexbox 布局介绍
转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...
- View的介绍和运用 && FlexBox布局
开始我们今天的项目学习啦~~~~~~ 1> 第一步当然是创建项目啦: 进入终端: 创建ViewDemo项目 命令如下啦,你看懂了对吧...嘻嘻!!! 2>View的介绍和运用 项目安装创建 ...
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- Flexbox，更优雅的布局
在设计的眼中,排版的操作是一件很简单的事情,靠左.置中.靠右,我只要点一下,所有元素,就会乖乖的到指定的位置. 但到了前端在排版的实现上,就不是这样了. 我们常常得用一堆其实本来不是这样用的属性来做 ...
- flexbox-CSS3弹性盒模型flexbox完整版教程
原文链接:http://caibaojian.com/flexbox-guide.html flexbox-CSS3弹性盒模型flexbox完整版教程 A-A+ 前端博客•2014-05-08•前端开 ...
随机推荐
- .NET通用基本权限系统
DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...
- angular ui-route
http://www.cnblogs.com/freeliver54/p/4488141.html
- SQLite 使用教程2 语法
http://www.runoob.com/sqlite/sqlite-syntax.html SQLite 语法 SQLite 是遵循一套独特的称为语法的规则和准则.本教程列出了所有基本的 SQLi ...
- window 便笺
windows的便签很方便人们记录日常工作安排,但是不是所有人都知道如何调用,下面介绍下如何调用windows便签: 1.win + R --> StikyNot 2.弹出便签界面 3.右击底 ...
- Learn_Dynamic
首先看一下Dynamic的定义 Visual C# 2010 引入了一个新类型 dynamic. 该类型是一种静态类型,但类型为 dynamic 的对象会跳过静态类型检查. 大多数情况下,该对象就像具 ...
- 关于java.util.Properties读取中文乱码的正确解决方案（不要再用native2ascii.exe了）
从Spring框架流行后,几乎根本不用自己写解析配置文件的代码了,但近日一个基础项目(实在是太基础,不能用硕大繁琐的Spring), 碰到了用java.util.Properties读取中文内容(UT ...
- Nginx开发从入门到精通
nginx由于出色的性能,在世界范围内受到了越来越多人的关注,在淘宝内部它更是被广泛的使用,众多的开发以及运维同学都迫切的想要了解nginx模块 的开发以及它的内部原理,但是国内却没有一本关于这方面的 ...
- javascript中的 "=="
对象之间比较比较的是引用地址 对象和其他比较,转成字符串 字符串和数字比较,字符串转成数字 布尔值和任何比较,转成数字 undefined == null NaN 和谁都不相等 javascript权 ...
- Android Sqlite 导入CSV文件 .
http://blog.csdn.net/johnnycode/article/details/7413111 今天遇到 Oracle 导出的12万条CSV格式数据导入 Android Sqlite ...
- 不同linux系统添加开机启动程序的命令
see http://phpcj.org/blog/%E4%B8%8D%E5%90%8Clinux%E7%B3%BB%E7%BB%9F%E6%B7%BB%E5%8A%A0%E5%BC%80%E6%9C ...