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•前端开 ...
随机推荐
- iOS 分类和继承
iOS 中分类(Categories) 和 继承(Inherit)有相同的功能,但在一些细节上又有差异,简单介绍一下两者的异同. 分类可以在不知道系统类源代码的情况下,为这个类添加新的方法.分类只能用 ...
- 已知有一个Worker 类如下： public class Worker { private int age; private String name; private double salary; public Worker (){} public Worker (String nam
package homework006; public class Worker { private int age; private String name; private double sala ...
- Finite Difference Method with Mathematica
Euler's method
- HDU 2112 HDU Today -- from lanshui_Yang
此题主要是要用到字符串向整数的映射 , 很自然的想到了 STL 中的map ,哎,贡献无数次WA,最后才发现每次运行时 map 忘了清空 !!!!本题,用dijkstra 和 spfa 均可 ,但是要 ...
- SpringMVC 参考文档
原文地址:http://blog.csdn.net/lufeng20/article/details/7598801
- mysql下命令行执行sql脚本
1. 登录mysql mysql -uroot -p 2. 执行脚本 mysql>use dbname; mysql>source /home/db/xx.sql
- httpclient模拟浏览器訪问站点
HttpClient 是 Apache Jakarta Common 下的子项目.能够用来提供高效的.最新的.功能丰富的支持 HTTP 协议的client编程工具包.而且它支持 HTTP 协议最新的版 ...
- node.js在windows下的学习笔记(4)---同步，异步，回调的概念
Node.js是使用事件驱动的,非阻塞的I/O模型,用于构建快速的,可扩展的网络应用程序. Node.js想解决的问题是:处理输入,输入,高并发 1.阻塞与非阻塞 阻塞也叫同步,是指每一次执行一个操作 ...
- 树套树专题——bzoj 3110: [Zjoi2013] K大数查询 & 3236 [Ahoi2013] 作业 题解
[原题1] 3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec Memory Limit: 512 MB Submit: 978 Solved: 476 Descri ...
- 使用 ZooKeeper 同步集群配置
用 ZooKeeper 同步集群配置,当需要修改所有节点配置时,将配置更新到 ZooKeeper 的一个节点,引起这个节点数据发生变化, 其他所有需要同步配置的节点上的本地 Watcher 会立即发现 ...