Flex布局简介

**

Flex布局

**

一、什么是Flex布局？

	Flexible Box的缩写，意为“弹性布局”，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。目前，它已经得到了所有
	浏览器的支持，这意味着，现在就能很安全地使用这项功能。

二、Flex概念

	想要使用Flex布局必须先给元素添加属性定义为弹性盒。采用了Flex布局的元素称为“容器”，它的所有子元素称为“项目”。
	各类型的元素都可以定义为Flex布局，如块级元素，

/*块级元素*/
div{
	display:flex;
}

展示效果如下，

行级元素也可以定义为Flex布局

div{
	display:inline-flex;
}

展示效果如下，

	当使用 flex 布局时，首先想到的是两根轴线 ——主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用
	flexbox的所有属性都跟这两根轴线有关。
	
	注：1.当元素设置为display:flex时，默认x轴为主轴，其子元素在主轴排列。
	   2.当元素设置为display:flex时，其子元素都能设置宽高。
	   3.当元素设置为display:flex时，其子元素的float和clear无效。
	   4.当元素设置为display:flex时，其子元素的vertical-align（元素垂直对齐方式）无效。

三、容器Flex属性

	1.flex-direction	
	2.flex-wrap
	3.flex-flow
	4.justify-content
	5.align-items
	6.align-content

3.1 flex-direction

	flex-direction	决定主轴的方向

div{
	flex-direction:row | row-reverse | column | column-reverse;
}

row：水平方向为主轴，起点在左侧

row-reverse：水平方向为主轴，起点在右侧

column：主轴为垂直方向，起点在顶部

column-reverse：主轴为垂直方向，起点在底部

3.2 flex-warp

	flex-warp	决定子元素是否换行

div{
	flex-warp:nowarp | warp | warp-reverse;
}

nowarp(默认值)：不换行

warp：换行

warp-reverse：反向换行

3.3 justify-content

	jusify-content	子元素在主轴上的对齐方式

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

flex-start：子元素位于主轴起始位置

flex-end：子元素位于主轴终点位置

center：子元素主轴居中

space-around：子元素自动分配间距

space-between：子元素两端对齐，中间自动分配间距

3.4 align-items

	align-items	子元素在侧轴上的对齐方式

div{
	display:flex-start | flex-end | center | baseline | stretch;
}

flex-start：子元素位于侧轴起始位置

flex-end：子元素位置侧轴终点位置

center：子元素侧轴居中

baseline：子元素基线对齐

stretch：子元素默认位置对齐

3.5 align-content

	align-content	多行元素在侧轴上的对齐方式（多行元素才有效）

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

flex-start：子元素位于侧轴起始位置

flex-end：子元素位于侧轴终点位置

center：子元素位于侧轴居中

space-around：子元素自动分配间距

space-between：子元素两段对齐，中间自动分配间距

stretch：子元素默认位置对齐

3.6 flex-flow

	flex-flow是flex-direction和flex-warp的缩写，默认值为row nowarp。

div{
	flex-flow:<flex-direction><flex-warp>;
}

四、项目Flex属性

4.1 align-self

	align-self	控制单个子元素在侧轴上的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性；若没有父元素，则等同于stretch

div{
	align-self:flex-start | flex-end | center | auto | stretch;
}

4.2 order属性

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

div2{
	order:4;
}

4.3 flex-grow

	flex-grow	定义项目的放大比例，默认为0

div{
	flex-grow:1;
}

4.4 flex-shrink

	flex-shrink	定义项目的缩小比例，默认为1

div{
	flex-shrink:0;
}

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

4.5 flex-basis

	flex-basis	定义分配多于空间之前，项目占据的主轴空间，默认值为auto

div{
	flex:<length> | auto;
}

4.6 flex

	flex	是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto

div{
	flex:none|<flex-grow> | <flex-shrink> | <flex-basis>;
}