Flex布局

Flex布局（Flexible Box，弹性布局）

1. Flex布局是什么：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以使用Flex[布局]

   布局使用
   一般	display：flex；
   行内元素	display：inline-flex；
   Webkit内核的浏览器	display：-webkit-flex;
   注意点：	使用Flex布局后，子元素的float、clear、vertical-align属性即将失效

   八大Webkit内核浏览器
   Webkit是一个开源的浏览器引擎，与之相对应的引擎有Gecko（Mozilla Firefox 等使用）和Trident（IE 使用）。 同时WebKit也是苹果Mac OS X体统引擎框架版本的名称，主要用于Safari，Dashboard，Mail 和其他一些Mac OS X 程序。
   Google Chrome 谷歌浏览器 Safari浏览器 搜狗高速浏览器 遨游浏览器3 QQ浏览器 360极速浏览器 世界之窗浏览器 阿里云浏览器 WebKit是一个开源的项目。

2. 基本概念：采用Flex布局的元素称为Flex容器。其中所有的子元素自动成为容器成员，称为Flex项目。

3. 容器的属性：

容器的六个属性
flex-direction 决定主轴的方向	flex-direction:row（主轴为水平方向，起点在左端）|row-reverse（主轴为水平方向，起点在右端）|column（主轴为垂直方向，起点在上沿）|column-reservse(主轴为垂直方向，起点在下沿)
flex-wrap 一行，满自动换行	flex-wrap:nowrap(默认不换行)|wrap（换行且第一行在上）|wrap-reverse（换行且第一行在下）
flex-flow flex-direction属性和flex-wrap属性的简写	flex-flow：|| 其中默认值为row nowrap （nowrap是不换行）
justify-content 定义项目在主轴上的对齐方式	justify-content：flex-start(默认值，左对齐|flex-end（右对齐）|center（居中）|space-between（两端对齐，项目之间的间隔相等）|space-around（项目间隔相等，项目之间的间隔比项目与边框的间隔大一倍）)
align-items 定义项目在交叉轴上如何对齐	align-items：flex-start(交叉轴的起点对齐)|flex-end（交叉轴的终点对齐）|center（交叉轴的中点对齐）|baseline（项目的第一行文字的基线对齐）|stretch（默认值，项目没有设置高度或者设置成auto，讲占满整个容器的高度）
align-content 定义多根轴线的对齐方式	alig-content：flex-start（与交叉轴的起点对齐）|flex-end（与交叉轴的终点对齐，即最下面）|center（与交叉轴的中点对齐）|space-between（与交叉轴的两端对齐，轴线之间的间隔平均分布）|space-around（每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍）|stretch（默认值，轴线占满整个交叉轴）

4.项目属性

项目的六个属性
order 定义项目的排列顺序	order：整数值
flex-grow 定义项目放大比例	flex-grow： 默认值是0
flex-shrink 定义了项目的缩小比例	flex-shink： 默认值是1 （越大缩小倍数越大）
flex-basis 义了在分配多余空间之前，项目占据的主轴空间（main size）	flex-basis: | auto; /* default auto */ 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex 是flex-grow, flex-shrink 和 flex-basis的简写	flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] 默认值为0 1 auto。后两个属性可选
align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性	align-self: auto | flex-start | flex-end | center | baseline | stretch; 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

原博客：阮一峰Flex布局