Flex弹性盒模型（新老版本完整）--移动端开发整理笔记（二）

Flex布局

Flex即Flexible Box，写法为：display：flex(旧版：display: -webkit-box)

在Webkit内核下，需要加-webkit前缀:

.box{
	display: -webkit-flex; //safari
	display: flex;
}

注意：

1.css 列（CSS columns）在弹性盒子中不起作用

2.float, clear and vertical-align 在flex项目中不起作用

新旧兼容写法：

.box{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

要注意的是，如果子元素是行内元素，在很多情况下都要使用 display:block 或 display:inline-block 把行内子元素变成块元素（例如使用 box-flex 属性），这也是旧版语法和新版语法的区别之一。

容器属性

• flex-direction / -webkit-box-orient(老版)

• flex-wrap / -webkit-box-lines（老版）

• flex-flow

• justify-content / -webkit-box-pack（老版）

• align-items / -webkit-box-align(老版)

• align-content

1.flex-direction属性

新版：

.box {
	 flex-direction: row | row-reverse | column | column-reverse;
} 
 //此属性决定主轴的方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

老版：

.box {
	 -webkit-box-orient:horizontal 水平显示 | vertical 垂直方向 
} 

元素在主轴上排列为反序：
-webkit-box-direction: reverse; //注意： box 写法的 box-direction 只是改变了子元素的排序，并没有改变对齐方式，需要新增一个 box-pack 来改变对齐方式

元素在主轴上排列为正序：
-webkit-box-direction: normal;

新旧兼容写法：

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;

    -moz-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}   // 右到左排序

.box{
    -webkit-box-pack: end;
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;

    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}  //下到上

2.flex-wrap属性

新版：

.box{
	flex-wrap: nowrap | wrap | wrap-reverse;
}
//默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap(默认): 不换行;
wrap: 换行，第一行在上方;
wrap-reverse: 换行，第一行在下方;

老版：

.box{
	box-lines: single | multiple;
	/*允许换行：不允许（默认） | 允许*/
}

3.flex-flow属性

.box {
	flex-flow: <flex-direction> || <flex-wrap>;
}

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

4.justify-content属性

新版：

.box {
	justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

老版：
.box {

	-webkit-box-pack: 

		start //所有子元素在盒子左侧显示，富裕空间在右侧

        end //所有子元素在盒子右侧显示，富裕空间在左

        center //所有子元素居中

        justify //富裕空间在子元素之间平均分布
}

5.align-items属性

新版：

.box {
	align-items: flex-start | flex-end | center | baseline | stretch;
}

//align-items属性定义项目在交叉轴（竖直）上如何对齐。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

老版：

-webkit-box-align：start | end |  center

6.align-content属性

.box {
	align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

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

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

子元素属性

• order / -webkit-box-ordinal-group(老版)

• flex-grow / -webkit-box-flex(老版)

• flex-shrink

• flex-basis

• flex

• align-self

1.order属性

.item {
	order: <integer>;
}

//order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2.flex-grow属性

.item {
	flex-grow: <number>; /* default 0 */
}

//flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.flex-shrink属性

.item {
	flex-shrink: <number>; /* default 1 */
}

//flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4.flex-basis属性

.item {
	flex-basis: <length> | auto; /* default auto */
}

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5.flex属性

.item {
	 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6.align-self属性

.item {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

//align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。