flex 中间层的高度完全由flex元素决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fa{
display: flex;
flex-flow: row nowrap;
width: 300px;
height: 100vh;
border: 1px solid #000;
}
.fa .son1{
/* 注意这里 son1是没有给高度的，但是son1后代demo1给了高度，son1的fa给了高度，
那么，son1的高度完全由fa决定。
*/
width: 100px;
background: firebrick; }
.fa .son1 .demo1{
height: 2000px;
width: 50px;
background: darkgoldenrod;
} </style>
</head>
<body>
<div class="fa">
<div class="son1">
<div class="demo1"></div>
</div> </div>
</body>
</html>
情况2：fa son1都没有给高度 demo1给了高度，最终fa son1的高度由demo1决定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fa{
display: flex;
flex-flow: row nowrap;
width: 300px;
/* height: 200px; */
border: 1px solid #000;
}
.fa .son1{ width: 100px;
background: firebrick; }
.fa .son1 .demo1{
height: 200px;
width: 50px;
background: darkgoldenrod;
} </style>
</head>
<body>
<div class="fa">
<div class="son1">
<div class="demo1"></div>
</div> </div>
</body>
</html>
flex 中间层的高度完全由flex元素决定的更多相关文章
- CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？
如果子元素没有设置浮动(float),父元素实际上会根据内容,自动宽高进行适应的. 当子元素增加了浮动后,最简单的处理方法是给父元素添加overflow:hidden属性,此时父元素的高度会随子元素的 ...
- Flex 4 不同主题下容器子元素的管理方法
Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...
- 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...
- 父元素高度为auto,子元素使用top:-50%没有效果的问题
无意间在实现元素垂直居中的一种方式测试到,当一个元素高度没有指定的情况下,其 postion:relative;top:-50%;无效 后来查阅w3c看到这样一句话: <percentage&g ...
- CSS中为什么有的元素能够设置高度，而有的元素却不能设置高度与宽度？
可以使用{display:block}将内联元素变为块级元素,同时使用{display:inline}将块级元素变为内联元素. {display:inline-block}又是怎么回事,根据张鑫旭老师 ...
- flex的圣杯布局记录 （flex : 0 0 80px）
- CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
在使用flex布局时,若出现换行,有两种较为特殊的现象是值得我们研究的: 子元素高度被拉伸,其实际高度大于它的内容高度. 各行子元素之间的行间距过大,甚至我们根本没有给子元素设置margin. 现在我 ...
- 使用flex布局解决百分比高度元素垂直居中
方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...
- flex自适应高度内容高度超出容器高度自动出现滚动条的问题
在容器中设置 flex-grow:2; overflow-y:auto;overflow-x:hidden;容器高度自适应. 内容高度不固定,无法出现滚动条,然后在容器中添加height:0,出现滚动 ...
随机推荐
- 我还在生产玩 JDK7，JDK 15 却要来了!|新特性尝鲜
自从 JDK9 之后,每年 3 月与 9 月 JDK 都会发布一个新的版本,而2020 年 9 月即将引来 JDK15. 恰巧 IDEA 每四五个月会升级一个较大的版本,每次升级之后都会支持最新版本 ...
- Python的10个神奇的技巧
尽管从表面上看,Python似乎是任何人都可以学习的一种简单语言,但确实如此,许多人可能惊讶地知道一个人可以熟练掌握该语言. Python是其中的一门很容易学习的东西,但可能很难掌握. 在Python ...
- java_数组的定义与操作
数组定义和访问 数组概念 数组概念: 数组就是存储多个数据的容器,数组的长度固定,多个数据的数据类型要一致. 数组的定义 方式一 数组存储的数据类型[] 数组名字 = new 数组存储的数据类型[长度 ...
- Linux系统安装MySQL详细教程
首先进入MySQL官网下载rpm安装包 用yum install mysql80-community-release-el7-3.noarch.rpm 安装 yum repolist all|grep ...
- git使用-克隆仓库
1.git clone 克隆地址 克隆地址: 2.克隆命令
- 将阿里矢量图添加到element-ui
在阿里矢量图的操作 选择需要的图标添加至购物车 选择图标 将购物车中的图标, 添加至项目 添加至项目 会自动跳转到我的项目 项目页面 在 更多操作 中选择 编辑项目 更多操作 将 Fo ...
- SpringMVC的简介和工作流程
一.简介 Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.Spri ...
- day12 异常 模块 单例
1.异常 处理 在程序执行过程中 ,发生,影响程序的正常运行 在python中 异常就是一个错误 try .... except....捕获异常 try 用来检测t ...
- django自带orm妙用
django对数据库数据进行处理方式通常有以下几种方式: 1.使用原生sql对数据库进行处理:pymysql,cx_oracle 2.使用外置orm模块来对数据库进行处理:sqlalchemy 3.使 ...
- springboot 读取resources下的文件然后下载
记录下代码 /** * 下载模板 * * @param response * @param request */ @RequestMapping(value = "downloadTemp& ...