flex相关布局属性以及垂直居中布局方式

flex-direction 属性规定灵活项目的方向。
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。。
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
warp:规定灵活的项目在必要的时候拆行或拆列。

---

align-content和align-items

---

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
只有当多行的时候才会生效

      		<div class="child-1">
      			<div class="child-2">a
      			</div>
      			<div class="child-2">a
      			</div>
      			<div class="child-2">a
      			</div>
      		</div>

    			.child-1 {
    				margin: 30px auto;
    				width: 200px;
    				display: flex;
    				flex-direction: row;
    				flex-wrap: wrap;
    				align-content: center;
    				height: 200px;
    				background-color: grey;
    			}
    			.child-2 {
    				width: 100px;
    				height: 20px;
    			}

http://www.runoob.com/try/playit.php?f=playcss_align-content&preval=space-between
使用 justify-content 属性对齐主轴上的各项（水平）。
http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch

align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
http://www.runoob.com/try/playit.php?f=playcss_align-self&preval=auto

stretch：默认值。元素被拉伸以适应容器。
center：元素位于容器的中心。
flex-start：元素位于容器的开头。
flex-end：元素位于容器的结尾。
space-between：元素位于各行之间留有空白的容器内。
space-around：元素位于各行之前、之间、之后都留有空白的容器内。
initial：设置该属性为它的默认值。
inherit：从父元素继承该属性。
baseline：元素位于容器的基线上。

垂直居中布局方式
方法一
/这个方法最大的局限在于它要求元素的宽高是固定的。/

	#main {
		position: absolute;
		top: calc( 50% - 3em);
		left: calc( 50% - 9em);
		width: 18em;
		height: 6em;
	}

方法二
/缺点：必须使用绝对定位/

      #main {
      	position: absolute;
      	top: 50%;
      	left: 50%;
      	transform: translate(-50%, -50%);
      }

方法三

  	#main {
  		margin: 50vh auto 0;
  		transform: translateY(-50%);
  	}

方法四

/flex/

  	body {
  		display: flex;
  		min-height: 100vh;
  		margin: 0;
  	}
  	
  	#main {
  		margin: auto;
  	}
  	
  	#main {
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		width: 18em;
  		height: 10em;
  	}