我的天！居然可以这么“弹”！—— 弹性盒布局属性详述

先安利两发对小K启发很大的，关于flex弹性盒布局使用的博文及演示道具~

博文  http://www.cnblogs.com/yhsa/p/6483675.html

演示  http://www.css88.com/demo/flexbox-playground/

 

一、什么是弹性盒布局？

　　flexible box，弹性盒子，即为弹性盒布局，它可以为几乎所有的元素添加，来最大增强元素的灵活性，但是弹性盒子是一种比较霸道的布局方式，在flex下，子元素的float、clear 和 vertical-align 属性将失效。

二、弹性盒布局的使用及各属性详解

1、给父容器添加display:flex或者inline-flex属性

2、父容器可以使用的属性值

　　2.1 flex-direction：决定主轴的方向（即项目的排列方向）

　　　　row（默认值）--- 主轴为水平方向，起点在左端。

　　　　row-reverse --- 主轴为水平方向，起点在右端。

　　　　column --- 主轴为垂直方向，起点在上沿。

　　　　column-reverse --- 主轴为垂直方向，起点在下沿。

 

　　2.2 flex-wrap：如果一条轴线排不下，如何换行

　　　　nowrap --- （默认值）不换行，当父容器宽度不够时，每个item会被适当挤压

 

　　　　wrap --- 换行，第一行在父容器最上方

 

　　　　wrap-reverse --- 换行，第一行在父容器最下方

 

 

　　2.3 flex-flow

　　　　flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap

　　2.4 justify-content：定义了项目在主轴上的对齐方式

　　　　flex-start（默认值） --- 左对齐，每个item之间会挤压

　　　　flex-end --- 右对齐，每个item之间会挤压

　　　　center --- 居中，每个item之间会挤压

　　　　space-between --- 两端对齐，项目之间的间隔都相等。（首尾项目分别在父容器最左和最右）

　　　　space-around --- 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。（首尾项目会与父容器两侧各有间隔）

 

　　2.5 align-items：定义项目在交叉轴上如何对齐

　　　　flex-start --- 交叉轴的起点对齐。

　　　　flex-end --- 交叉轴的终点对齐。

　　　　center --- 交叉轴的中点对齐。

　　　　baseline --- 项目的第一行文字的基线对齐。

　　　　stretch（默认值） --- 如果项目未设置高度或设为auto，将占满整个容器的高度。

 

　　2.6 align-content：定义了多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）

　　　　flex-start：与交叉轴的起点对齐。

　　　　flex-end：与交叉轴的终点对齐。

　　　　center：与交叉轴的中点对齐。

　　　　space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

　　　　space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

　　　　stretch（默认值）：轴线占满整个交叉轴。

 

 

3、子容器上使用的属性

　　3.1 order：定义排列顺序，数字越小越靠前。

 

　　3.2 flex-grow：定义项目放大的比例，默认为0。即如果存在剩余空间也不放大。

 

　　3.3 flex-shrink：定义了项目的缩小比例，默认为1。即如果空间不足，该项目将缩小。

 

　　3.4 flex-basis：定义了在分配多余的空间之前，项目占据的主轴空间（main size 项目的宽度）。

　　3.5 flex：是 flex-grow、flex-shrink 和 flex-basis 属性的简写，默认值为 0 1 auto。后两个属性可选。

　　　　该属性有两个快捷值 none（0 0 auto）和 auto （1 1 auto）。

　　　　建议优先使用这两个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

　　3.6 align-self：定义单个项目在交叉轴上的对齐方式，可覆盖 align-items 属性，属性值同align-items，默认值为auto。