html布局直接填充,css实现自动填充布局

更新记录

0.0.2(2020-01-07)

无

平台兼容性

app

微信小程序

支付宝小程序

百度小程序

字节小程序

QQ小程序

快应用

app-vue

×

×

×

×

×

×

h5-Safari

Android Browser

微信浏览器(Android)

QQ浏览器(Android)

Chrome

IE

Edge

Firefox

pc-Safari

×

×

×

×

×

×

×

×

×

auto_view

通过css的flex盒子布局，来填充剩余空间

使用方式：

此处可以放选项卡组定义组件

text

text

text

111

222

export default {

data() {

return {

}

},

onLoad() {

},

methods: {

}

}

page{

width: 100%;

height: 100%;

}

简单说明：

核心就在于盒子布局中的flex-grow属性，当前的设置方式是通过将最外围的盒子给固定为屏幕的大小，从而实现了内部的元素宽高自动填充。

当实际情况下是限制在一个区域布局的时候，此方法也是适用的