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,出现滚动 ...
随机推荐
- java_Collection、Map、泛型的使用
Collection集合 集合按照其存储结构可以分为两大类,分别是 单列集合 java.util.Collection 双列集合 java.util.Map Collection:单列集合类的根接口, ...
- UIAutomator环境Android8.0 环境异常解决
个人PC环境 ANDROID_HOME:F:\1Study\Andriod\51zxw_2018-0102\Sdk ANT_HOME:D:\ant\apache-ant-1.10.5\ CLASSPA ...
- 社区观点 | 关于比原链MOV巡查官制度的几点思考
在ChainNode白皮书解密读书会01期活动中,比原链高级研究员刘秋杉带领大家领读「MOV:下一代去中心跨链 Layer 2 价值交换协议」白皮书,得到了很多粉丝的关注,其中gentledog的读书 ...
- HRNet
- springboot多环境配置文件
一.关于springboot的配置文件 springboot的配置文件主要有两种:properties文件和yml文件,我们只要选择一种使用就可以了.我们通过properties文件介绍一下配置的方式 ...
- C#设计模式之10-外观模式
外观模式(Facade Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/407 访问. 外观模式属于结构 ...
- 四种方法求Capacitated Facility Location Problem问题
问题详情 1. 贪心算法 1.1 算法框架 此题可以利用贪心算法来求解, 可以假设只关注顾客的cost, 当仓库满了就在下一个仓库里 具体解决方案: 将每个顾客到工厂的cost 由小到大进行排序 从第 ...
- 关于什么时候用，怎么用：ExecuteNonQuery()，还有其它返回值
ExecuteScalar方法返回的类型是object类型,这个方法返回sql语句执行后的第一行第一列的值,由于不知到sql语句到底是什么样的结构(有可能是int,有可能是char等等),所以Exec ...
- Goland 生成可执行文件
Goland通过调用go build 生成可执行文件. 默认Goland是可以执行程序,但你找不到可执行文件. 你需要自定义配置文件. 创建go build配置文件 Run kind 选Directo ...
- 什么是P，NP和NPC问题？
P问题,NP问题,NPC问题?这些都是计算机科学领域,关于算法方面的术语.在认识这些术语之前,建议同学们先认真学习一下算法的时间复杂度,因为算法的时间复杂度与P,NP和NPC问题高度相关. 什么是P问 ...