Flex弹性布局详解

Flex弹性布局

说明：重点是分清楚主轴方向、侧轴方向的设置，作用在父元素和作用在子元素上的属性。

(1)控制方向

flex-direction控制主轴方向，取值有row(默认) |row-reverse | column | column-reverse(垂直方向翻转)

align-items控制侧轴方向，取值有strenth(默认) | flex-start(顶部对齐) |flex-end(底部对齐) |center(居中对齐)

(2)控制换行

flex-wrap用于控制换行，取值有nowrap(默认，不换行) | wrap(宽度不足换行) | wrap-reverse(向上换行)

(3)综合主轴方向与换行

flex-flow可设置两个值，主轴方向与换行

(4)控制子项

justify-content 控制主轴方向子项的对齐和分布方式，对齐方式的取值有flex-start(默认) | flex-end |center ，分布方式(主要是对空白位置的分配)的取值有space-between | space-around | space-evently

align-items 控制侧轴方向子项的对齐和分布方式，取值与justify-content，但要注意是在多行的情况下才看得出效果。

(5)综合实例

	<div class="father">
		<div class="son">01</div>
		<div class="son">02</div>
		<div class="son">03</div>
		<div class="son">04</div>
		
		<div class="son">05</div>
		<div class="son">06</div>
		<