flex布局

定义

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

模型

模型定义： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。特点：1. 每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系。注意：水平的不一定就是主轴。2. 每根轴都有起点和终点，这对于元素的对齐非常重要。 3. 弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列。4. 弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。弹性容器的两根轴非常重要，所有属性都是作用于轴的。
主轴：flex布局大部分的属性都是作用于主轴的，在交叉轴上很多时候只能被动地变化。

属性

容器属性：	
	flex-direction属性：
		用于控制项目排列方向与顺序，默认row，即横向排列。
		取值：row(默认) | row-reverse | column | column-reverse。
		
	flex-wrap属性：
		用于控制项目是否换行，nowrap表示不换行。
		取值：nowrap(默认) | wrap | wrap-reverse。
		
	flex-flow属性：
		flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行。
		
	justify-content属性：
		用于控制项目在主轴上的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
		取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly。
		
	align-items属性：
		用于控制项目在交叉轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器。
		取值：flex-start | flex-end | center | baseline | stretch(默认)。
	align-content属性：
		用于控制多行项目的对齐方式，如果项目只有一行则不会起作用，需设置flex-wrap: wrap；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。
		取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认)。


元素属性：
	order
		用于决定项目排列顺序，数值越小，项目排列越靠前。
		取值：默认0。
		
	flex-grow
		用于决定项目在有剩余空间的情况下是否放大，默认不放大。
		注意：即便设置了固定宽度，也会放大。
		取值：默认0。
		
	flex-shrink
		用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小。
		注意：即便设置了固定宽度，也会缩小。			
		但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。
		取值：默认1。
		
	flex-basis
		用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖widtn属性。
		取值：默认auto
		
	flex
		flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
		取值：默认0 1 auto。
		
	align-self
		用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
		取值：auto(默认) | flex-start | flex-end | center | baseline | stretch。