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•前端开 ...
随机推荐
- [置顶] MapReduce 编程之 倒排索引
本文调试环境: ubuntu 10.04 , hadoop-1.0.2 hadoop装的是伪分布模式,就是只有一个节点,集namenode, datanode, jobtracker, tasktra ...
- 编写一个Java应用程序，该程序包括3个类：Monkey类、People类和主类 E。要求： (1) Monkey类中有个构造方法：Monkey (String s)，并且有个public void speak() 方法，在speak方法中输出“咿咿呀呀......”的信息。 (2)People类是Monkey类的子类，在People类中重写方法speak(),在speak方法 中输出“小样的，不
package homework1; public class Monkey { //构造方法 Monkey(String s) { } //成员方法 public void speak() { Sy ...
- linux搜索jar内容
linux搜索 spring-beans-2.5.6.jar 内容 1.jar tvf spring-beans-2.5.6.jar -c 创建新的归档文件 -t 列出归档目录 -x 解压缩 ...
- Winfrom巧用Using设置鼠标为WaitCursor
本文转载:http://www.cnblogs.com/LoveJenny/archive/2013/03/13/2956922.html 看到try,finally ,有没有让你想到什么呢?,对了u ...
- cocos2dx中android下动态更新.so文件
作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037595.html 因为没用lua脚本写游戏,所以每次发布出去后,发现在bug,需要 ...
- Android下得到APK包含信息
很多情况下,我们需要通过APK文件来得到它的一些信息. (此时此APK不一定被安装了) 0. 基础知识:可以通过android.content.Context的方法 getPackageManager ...
- Behavioral模式State模式
1.意向 同意一个目标,然后改变其内部状态,改变它的行为. 对象似乎改变它的类别. 2.别名 状态对象(Objects for States) 3.动机 考虑一个表示网络连接的类TCPConnecti ...
- 面试题总结之Linux/Shell
Linux Linux cshrc文件作用 Linux如何起进程/查看进程/杀进程 Linux 文件755 代表什么权限 Linux辅助线程 Linux进程间通信方法 pipeline,msgq... ...
- window.top、window.parent
iframe和frameset中可能会用到window.parent.window.top 其中window.parent是相对于打开子页面的当前js所在页面的层级: 例如:a页面中包含一个ifram ...
- IPC with pipes, also dup2 redirect stream handle
#include <stdio.h> #include <sys/types.h> #include <sys/wait.h> #include <unist ...