使用css-flex布局实现上下固定宽度,中间自适应

752 阅读1分钟

直接上代码!

效果视频

20220729_230842_.gif

这是我在制作记账软件demo的时候遇到的问题,现阶段手机屏幕长度不一,有全面屏手机(如iphoneX)也有许多非全面屏(如iphone8)所以在制作应用时需要一个屏幕适配方案来适配现在的复杂场景,所以我就想到了利用flex布局来实现该功能。

该功能的精髓是在中间的div框中设置style样式为flex:1使得当页面高度拉长时,中间的div内容会优先撑开。