css3-flex布局

flex布局原理：
通过给父盒子添加flex属性 来控制子盒子的

@mixin flexbox($jc:sapce-between,$ai:center,$fd:row,$fw:nowrap) {
	display: flex;
	flex: 1;
	justify-content: $jc;
	align-items: $ai;
	flex-direction: $fd;
	flex-wrap: $fw
}

以下6个属性是对父元素设置的

flex-direction:设置主轴的方向
默认主轴方向就是X轴方向，水平向右
默认侧轴方向就是Y轴方向，水平向下
注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴来排列的

justify-content:设置主轴上的子元素排列方式
注意：使用这个属性之前一定要确认好主轴是哪一个

flex-wrap:设置子元素是否换行
默认情况下，项目都排在一条线（又称“轴线”）上，flex-wrap属性定义，flex布局中默认是不换行的

align-items:设置侧轴上的子元素排列方式（单行）
注意：该属性是控制子项在侧轴（默认是Y轴）上的排列方式 在子项为单项的时候使用

align-content:设置侧轴上的子元素排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子项常见属性
1. align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
默认值为auto,表示继承父元素的align-items属性，如果没有父元素则等同于stretch

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