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