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,出现滚动 ...
随机推荐
- 这几个冷门却实用的 Python 库，我爱了！
- 未来云原生世界的“领头羊”：容器批量计算项目Volcano 1.0版本发布
在刚刚结束的CLOUD NATIVE+ OPEN SOURCE Virtual Summit China 2020上,由华为云云原生团队主导的容器批量计算项目Volcano正式发布1.0版本,标志着V ...
- 《RabbitMQ》什么是死信队列
一 什么是死信队列 当一条消息在队列中出现以下三种情况的时候,该消息就会变成一条死信. 消息被拒绝(basic.reject / basic.nack),并且requeue = false 消息TTL ...
- C/C++陷阱与套路，当年就是折在这些地儿…
摘要:本文结合作者的工作经验和学习心得,对C++语言的一些高级特性,做了简单介绍:对一些常见的误解,做了解释澄清:对比较容易犯错的地方,做了归纳总结:希望借此能增进大家对C++语言了解,减少编程出错, ...
- C#LeetCode刷题之#257-二叉树的所有路径（Binary Tree Paths）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4082 访问. 给定一个二叉树,返回所有从根节点到叶子节点的路径. ...
- C++用递归实现斐波那契数列
[题目描述] 菲波那契数列是指这样的数列: 数列的第一个和第二个数都为1,接下来每个数都等于前面2个数之和. 给出一个正整数a,要求菲波那契数列中第a个数是多少. [输入] 第1行是测试数据的组数n, ...
- SpringBoot---SpringMVC关于拦截器的一些问题总结
SpringBoot---SpringMVC关于拦截器的一些问题总结 环境: IDEA :2020.1 Maven:3.5.6 SpringBoot: 2.3.2 1.直接在地址栏输入 http:// ...
- realm数据库报错：Changing Realm data can only be done from inside a transaction.
在编写realm数据库相关时: 代码: List<Student> delByStudent(String priNum){ RealmResults<Student> stu ...
- linux下使用vim创建编辑文件
vi/vim 使用实例 如果要想用vim/vi创建一个文件(使用命令): vim test.txt 不管文件存在与否 直接输入 vi 文件名 就能够进入 vi 的一般模式 按下 i 进入输入模式( ...
- 跟我一起学.NetCore之选项(Options)核心类型简介
前言 .NetCore中提供的选项框架,我把其理解为配置组,主要是将服务中可供配置的项提取出来,封装成一个类型:从而服务可根据应用场景进行相关配置项的设置来满足需求,其中使用了依赖注入的形式,使得更加 ...