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