flex布局中的自动占满剩下的内容

没点击的时候

点击完后的样子：

代码：

<template><div class="app"><div class="box" ><div class="box1":style="{height : isTrue ? '200px':'auto'}"@click="clickButton">box1</div><div class="box2">box2</div></div></div>
</template>
<script>
export default {name: 'app',data(){return {isTrue:true}},methods:{clickButton(){this.isTrue = ! this.isTrue}}
}
</script><style lang="less" scoped>.box{display: flex;width: 100%;/*height: 100%;*/height: 100vh;flex-direction: column;background-color: yellow;.box1{width: 100%;background-color:deeppink;}.box2{width: 100%;flex: auto;background-color: green;}}
</style>

做成这个需要有三个前提条件

1、父盒子(box)要设置 display: flex; flex-direction: column;前两个固定的 height: 100vh;高度必须设置

2、子盒子1(box1)高度必须是根据条件判断必须包括一个定高，一个auto

3、子盒子2(box2)必须设置flex为auto

flex布局中的自动占满剩下的内容相关推荐

【flutter布局】如何在动态宽高的容器下，使子组件自动占满宽高
场景: 实现一个弹性布局,卡片为动态高度,高度由左半边内容决定.右边内容自动占满高度,并使用spaceBetween对齐. 最终效果: 问题: 倘若Row组件无固定高度(height is uncon ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
flex布局让两个div等高并且内容垂直居中
flex布局让两个div等高并且内容垂直居中 <!DOCTYPE html> <html lang="en"> <head><meta c ...
微信小程序（safair浏览器）flex布局中的坑
今天在用微信小程序做flex布局的时候遇到了一些问题. 布局简单来说是这样的,最外层是一个flex布局属性为flex-direction:column的元素.里面有未设置height,并且flex-g ...
Flex布局中的flex属性
1.flex-grow,flex-shrink,flex-basis取值含义 flex-grow: 延申性描述.在满足"延申条件"时,flex容器中的项目会按照设置的flex-gr ...
flex布局中，元素等间距设置，包括第一个元素的左边，最后一个元素的右边，也等间距
项目中很多地方会用到等间距排放的场景,使用flex 布局可以很方便的实现 .fu{display: flex;ustify-content: space-between; } 通过上面代码,可以实现子 ...
微信小程序中使view占满整个屏幕高度的实现方法
前言: 今天做小程序的时候,在项目中要用到一个view占满屏幕高度和宽度,然后再在这个view里放置其他元素的情况. 宽度很简单,直接设置width: 750rpx;或者width: 100%;就行. ...

flex布局中的自动占满剩下的内容

flex布局中的自动占满剩下的内容相关推荐

最新文章

热门文章