flex 垂直居中、兩列對齊、自適應寬

flex 垂直居中

<div id="parent">
  <div id="child">
  </div>
</div>
<style>
#parent {
  display:flex;
  width:300px;
  height:300px;
  outline:solid 1px;
  justify-content:center;
  align-content:center; //主軸居中對齊
  align-items:center;//交叉軸的中點對齊
}
#child {
  width:100px;
  height:100px;
  outline:solid 1px;
}

</style>

flex 兩列等高

<div class="parent">
	<div class="child">hahjdjjajdES6提供的Proxy可以讓JS開發者很方便的使用代理模式，聽說Vue</div>
	<div class="child"></div>
</div>

<style>
.parent{
        width: 300px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: stretch;
	}
.child{
	width: 100px;
	outline: solid 1px; 

	}
</style>

align-items：交叉軸的對齊方式
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

flex 自適應寬

<div class="parent1">
	  <div class="child1"></div>
	  <div class="child2"></div>
</div>
<style>
.child1 {
        width:100px;
	 background-color:lightblue;
	}
.child2 {
	 width:100px;
	 flex:1;
	 outline:solid 1px;
        }
</style>

flex:1是flex-grow,flex-shrink,flex-basis的縮寫
flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大
flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。