小程序的FLEX的垂直布局弹性压缩

最新推荐文章于 2024-09-19 16:44:07 发布

大恒大

最新推荐文章于 2024-09-19 16:44:07 发布

阅读量306

点赞数

分类专栏：前端小程序笔记

本文链接：https://blog.csdn.net/kindmb/article/details/114506848

版权

前端同时被 3 个专栏收录

32 篇文章 3 订阅

订阅专栏

笔记

16 篇文章 0 订阅

订阅专栏

小程序

12 篇文章 0 订阅

订阅专栏

想实现这样的布局:
屏幕上下分成两块，第一块内容高度会内容变化，第二块根据第一块自动调整，但两块高度之和始终等于屏高总高

用FLEX布局这么写：

##屏幕总容器样式表
.h_page { 
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap; //垂直主轴，不许元素换行（换列），每元素填满宽度
}

##第一块的：
.diva {  
  flex: 0 0 auto; //元素高度随内容变化(auto），压缩与扩展都不允许
}
##第二块的
.divb {
  flex:1 1 auto; //元素高度随内容变化(auto），压缩与扩展都为弹性不允许
  height: 20vh; //此处写多少都无所谓，应该是最小高度
}