css3 flex:1

最近在写vue的移动端项目，在展示订单信息的时候用到了better-scroll插件（以下简称BS），BS需要给父级wrapper一个高度，滚动视图content也需要一个高度，写固定高度肯定是不实际的，在不同系统不同设备上高度都是不同的，写固定高度的话就会出问题，于是乎flex: 1就派上了用场

flex:1 具体就不解释了，只需要知道要使用flex:1，必须在弹性模块中，既display: flex

        

        

        

.main {
            display: flex;
            flex-direction: column;
            position: absolute;
            right: 0;
            left: 0;
            height: 100%;

}

.test1, .test3  {
            height: 5%;
            background-color: red;
 }

.test2 {
            flex: 1;
            background-color: yellow;
 }

.test3{
            background-color: green;
}

在这个例子中，test2就会自动占满除test1和test3以外的90%的视图

实际操作：