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•前端开 ...
随机推荐
- zoj 1622 Switch 开关灯 简单枚举
ZOJ Problem Set - 1622 Switch Time Limit: 2 Seconds Memory Limit: 65536 KB There are N lights i ...
- （莱昂氏unix源代码分析导读-50）LP11行式打印机
by cszhao1980 LP11有两个设备寄存器:状态寄存器(lpsr)和数据缓冲寄存器(lpbuf),可通过以下结构进行访问: 8812: #define LPADDR 0177514 8823 ...
- CSS构造颜色、背景与图像
设定颜色 背景使用 图像使用 1.设定颜色 红色的几种合法定义; #f00; #ff0000; Red; Rgb(255,0,0); Rgb(100%,0%,0 ...
- Delphi- ini文件的读写操作
一.读INI文件示例 procedure TForm1.FormCreate(Sender: TObject); Var MyIni :Tinifile; glAppPath :string; beg ...
- 常用SQL代码段
代码使用时须测试. --聚合函数 use pubs go select avg(distinct price) --算平均数 from titles where type='business' go ...
- 剑指OFFER之把数组排成最小的数（九度OJ1504）
题目描述: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 输入: 输 ...
- linux设置tomcat开机自动启动
1.修改/etc/rc.d/rc.local,使用vi /etc/rc.d/rc.local 命令2.在/etc/rc.d/rc.local文件最后添加下面两行脚本 export JAVA_HOME= ...
- C++中str1::function和bind
在C++的TR1中(TechnologyReport)中包括一个function模板类和bind模板函数,使用它们能够实现类似函数指针的功能,但却却比函数指针更加灵活,特别是函数指向类的非静态成员函数 ...
- 【Android】 图片编辑：创建圆角图片
创建圆角图片的方式大同小异,最简单的就是 9.png 美工做出来的就是.这种最省事直接设置就可以. 另外一种就是通过裁剪 这里的剪裁指的是依据原图我们自己生成一张新的bitmap,这个时候指定图片的目 ...
- PHP str_replace() 函数
定义和用法 str_replace() 函数使用一个字符串替换字符串中的另一些字符. 语法 str_replace(find,replace,string,count) 参数 描述 find 必需.规 ...