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，即項目的原本大小。