flex-box属性总结

概述

CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称为弹性盒模型。和其它的CSS3属性不一样，flexbox并不是一个属性，而是一个模块，包含多个操作布局的属性。

基本概念

图片

首先要使用弹性盒模型，先在容器中设置display:flex;(块级盒模型)或者display:inline-flex;(行内盒模型)。盒模型有主轴（main axis）和交叉轴(cross axis)的概念。盒模型中的每一个元素叫做伸缩项目（flex item）。

伸缩容器

伸缩容器中可以设置的属性

flex-direction设置主轴方向

flex-wrap伸缩流换行

flex-flow伸缩流 是主轴方向和伸缩流换行的复合属性

justify-content主轴对齐方式

align-items交叉轴对齐方式

align-content堆栈伸缩行

伸缩项目/条目

伸缩项目中可以设置的属性

align-self自身侧轴对齐方式

flex-basis伸缩基准值

flex-grow扩展比率

flex-shrink收缩比率

flex伸缩性

order显示顺序

FFC（flex formatting context）伸缩格式化上下文

使用flex布局实现上是使元素FFC化(flex formatting context伸缩格式化上下文)，FFC是普通流的一种。而浮动流和定位流以及CSS其他属性对FFC是有影响的，主要表现在以下几点:

[1]float、clear和vertical-align属性在伸缩项目上没有效果

[2]伸缩容器的margin与其内容的margin不会重叠

[3]text-align属性在伸缩容器上没有效果，因为其只可应用于块级block容器

[4]另外，columns属性伸缩容器上没有效果