flex 撑满问题

高度撑满 

  1. 在body.html设置高度 
  2. flex 方向为垂直

宽度撑满

  1. flex 方向为横向

css

*{
    padding: 0;
    margin: 0;
}
html,body
{
    height: 100%;
}
.box{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: pink;
}
.box0{
    height: 100px;
    background-color: #5bc0de;
}
.bx{
    background-color: #cccccc;
    height:100%;
    flex:1;
}复制代码


html

<body>
<div class="box">
    <div class="box0">0</div>
    <div class="bx">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
</div>
</body>复制代码


同时还可以设置 flex：1 

无论宽和高都是在没有设置固定的宽和高的原素方面设置 100%，就会在屏幕中将剩余的宽和高占满。