1.兩列等高

<div class="row">
  <div class="col">123</div>
  <div class="col">456</div>
</div>

.row {
  display: flex;
}
.col {
  flex: 1; 
  border: solid;
}

2.水平垂直居中

父元素：
display:flex;
justify-content:center;
aligh-items:center;

3.自適應(yīng)媒體高度
題目：比如蘋果6和5的尺寸不同，如何頁(yè)面布局的時(shí)候 保持導(dǎo)航條的高度，讓下面的div一直等于媒體的高度減去導(dǎo)航條的高度

Paste_Image.png

 <div class="son">
    </div>
    <div class="son1">
    </div>

*{
            margin:0;
            padding: 0;
        }
        div{
            box-sizing: border-box;
            border: solid 1px red;
        }
        html{
            height: 100%;
        }
      body{
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          height: 100%;
          border: solid 1px black;
      }
        .son{
            height: 3em;
        }
        .son1{
            flex:1;
        }