css面试题-两列等高，水平垂直居中，自适应媒体高度

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.自适应媒体高度
题目：比如苹果6和5的尺寸不同，如何页面布局的时候 保持导航条的高度，让下面的div一直等于媒体的高度减去导航条的高度

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;
        }