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•前端开 ...
随机推荐
- 7个改变世界的Java项目
Java的开源生态系统是强大而健康的,这是我们(Oreilly)创建OSCON Java(Open Source Convention Java)的主要原因之一.在过去10年中,一些项目已经被广泛接受 ...
- MongoDB命令学习
mongodb不像关系型数据库有很强大的GUI客户端,虽然mongodb也有,但功能和稳定性实在不敢恭维,所以操作mongodb我们大部分 都是用类似cmd命令的方式(mongodb称为shell操作 ...
- C#-将控件动态添加到选项卡页tablepage
tabPage1.Controls.Add(new Button()); 实例: Button cp = new Button(); cp.text="test";cp.Click ...
- IOS 图片阴影，圆角等处理
一直以来,为IOS添加图片的特殊效果都是通过跟美工的配合,比如,要加阴影,就从美工那边获得一张阴影效果图,在界面上画两个UIImageView,将阴影放在下面,图像放上上面,错开一定角度.有比如想做圆 ...
- 17周 oj 比較大小 类模板
/*声明一个类模板,利用它分别实现两个整数. 浮点数和字符的比較,求出大数和小数. 说明:在类模板外定义各成员函数. 输入两个整数.两个浮点数和两个字符 从大到小输出两个整数.两个浮点数和两个字符 * ...
- linux僵死进程的产生与避免
作者:lingdxuyan来源:ChinaUnix技术博客,本文版权由lingdxuyan所有,如需转载,请注明出处. 一个进程在调用exit命令结束自己的生命的时候,其实它并没有真正的被销毁, ...
- html页面docutype前面出现字符会导致IE678 margin:0 auto;失效
html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效
- 图源点到各个点的最短路径（DIJ）
# -*- coding: cp936 -*- import copy MV = 0xFFFFFFFF Vertexs = {0:'v0',1:'v1',2:'v2',3:'v3',4:'v4',5: ...
- Android（java）学习笔记154：使用GridView以及重写BaseAdapter
1.BaseAdapter: 对于ListView.GridView.Gallery.Spinner等等,它是它们的适配器,直接继承自接口类Adapter的,使用BaseAdapter时需要重写很多方 ...
- Android版本控制系统及其间的差异
一.何谓版本控制 它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编辑错误之后还可以回溯到以前的版本 二.可 ...