关于flex布局中,父元素高度auto，由一子元素撑开，另一子元素自适应高度问题

最新推荐文章于 2024-04-08 20:09:34 发布
最新推荐文章于 2024-04-08 20:09:34 发布
阅读量2.6k 收藏 3
点赞数 5
分类专栏： css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Auroral_Su/article/details/122859930
版权

.expressRecord-single-close {//父元素样式
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;//重点 stretch
position: relative;
}

.expressRecord-text { //子元素
margin-left: 30rpx;
padding-bottom: 20rpx;
flex-shrink: 0;
flex: 1;
}

此时只需将父元素的 align-items: center;变为 align-items: stretch; 重点

Auroral_Su
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
flex布局下父子元素的高度
qq_43111808的博客
06-08 7567
父元素为flex布局时： 没有设置高度的子元素与父元素高度一致。 1，如果父元素设置固定高度，则子元素中没有设置高度的元素将继承父元素的高度； 2，如果父元素没有设置高度，其高度由最高的子元素决定。 代码中可以将.father的高度注释一下对比。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
Flex布局实现div内部子元素垂直居中的示例
01-21
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），...
父容器内子容器浮动的高度自适应问题 _ CSS_HTML
weixin_30420305的博客
01-29 150
父容器内子容器浮动的高度自适应问题 _ CSS_HTML ‍1.当‍父容器不设置固定高度、宽度时，且子元素设置了浮动。让父容器随子容器的撑开而撑开，缩小而缩小,自动适应高宽度。 这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容IE6而使用的CSS HACK。zoo...
flex布局 ——子元素保持自身高度
追逐知识的过程最能使我们意识到自己的无知...
12-01 4442
flex布局 ——子元素保持自身高度，不跟随父元素高度自适应
自适应高度（height: auto和flex: 1）过渡动画方案
betterAndBetter_的博客
04-08 242
【代码】自适应高度（height: auto和flex: 1）过渡动画方案。
css中实现子父元素高度自适应子元素高度
朱宏的博客
10-18 4875
先说明下问题，需求是child2中字数不固定，需要实现parent随着child2的高度变化而变化： 解决办法： parent： position:relative; child： position:absolute; height:100%; 解释：当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元...
【CSS黑魔法】父元素无高度情况下的子元素高度自适应方法
热门推荐
bug_zero的博客
01-10 1万+
声明：一切从简，重点在方法不在命名（懒。。。），实际开发中千万一定不要这么干~~~~~~此方法IE6以上（不包括IE6）浏览器均可行，此方法或许并不是那么好更不是唯一方法，有其他想法可在评论区留下你的方法，一起研究黑魔法一起嗨皮，如有雷同，纯属那啥。。。。。感谢~~~~~~~~~ 正题： 问题重现： 在开发中可能会遇到这样一个问题（如图所示）：   当一个没有设置高度的父级
@css flex 布局子内容将父元素撑开
weixin_43809685的博客
09-01 3080
flex 布局子内容被撑开 遇到的问题： 需要显示的文本是通过富文本编辑器提交是文本（包含了p标签），展示时通过flex布局实现。如下图： 但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了，导致整个卡片内容被撑开了 解决： 通过给富文本编辑器生成的p标签设置flex:1;width:0px;的方式使整个p标签的宽度由flex属性去决定 （也就是有p标签的父元素宽度所决定），再通过设置溢出隐藏的css属性实现溢出隐藏。 overflow: hidden; white-space: nowra
flex 布局，子元素会撑开父元素
08-19 8754
<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } ...
flex布局，子元素撑开父元素
大兵的猫
04-03 9052
1.将父元素设置为display:flex时，子元素不设高度时（宽度需要设置）会默认撑开满父元素高度： 2.经典两栏布局 如果child1有子元素的话，并且子元素宽度过大，会撑开child1，将child2的宽度挤压，如下： 解决办法将child1的宽度设置为：width:0; ...
flex: 1； 子元素高度较高时不展示滚动条而是撑开父元素
xiaoxiannv666的博客
10-14 3346
flex布局中，flex: 1; overflow: auto;的子元素没有如期展示滚动条，而是被内容撑开高度；
flex布局 父元素属性之 justify-content 主轴上子元素的排列方式
01-07
父元素属性之 justify-content  justify-content：设置主轴上子元素的排列方式 justify-content 的属性值如下： 属性值 含义 flex-start 从主轴的头部开始排，主轴：x轴 左对齐；y轴 顶部对齐（默 认值） ...
css经典布局——头尾固定高度中间高度自适应布局
03-04
相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！百度实在让我这个“粉丝”失望。就...
05flex布局中的子元素的属性.ppt
最新发布
04-11
微信小程序基础精讲及项目实战视频课程（移动商城）课件资料
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
父级自适应，子级跟随父级高度
u011546682的博客
06-21 1691
发现一个神奇的现象。
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
weixin_44095605的博客
07-06 570
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高, 父元素一要设置flex,flex-direction 子元素设置占位1
css 文本排版方向，古文式排版等
全易
10-12 900
语法： writing-mode: horizontal-tb 或者 vertical-rl 或者 vertical-lr 或者 sideways-rl 或者 sideways-lr; 解释： horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-...
html中布局，让下一个子元素占据剩余的高度
weixin_34341229的博客
05-04 503
    ---------------------------------------------------------------------- 原因是： height:100% 引起的， 这句话的意思是，子元素的高度为父元素高度的100%，也就是和父元素（容器）的高度相等。 这样当父元素中有两个块级子元素时，假设父元素高度300px, 如果第一个子元素的高度是100，第二个子元素的高度是1...
css 父元素高度自适应，子元素高度跟随父元素自适应，怎么写
08-15
### 回答1： 可以使用以下代码实现: ```css .parent { height: auto; /* 让父元素高度自适应 */ } .child { height: 100%; /* 让子元素高度跟随父元素自适应 */ } ``` 在这里，`.parent` 是父元素的类名，`.child` 是子元素的类名。你需要确保在 HTML 中给父元素和子元素都加上了这些类名。 注意，如果父元素的高度是固定的，那么子元素的高度也会跟随父元素的高度变化。 例如: ```css .parent { height: 200px; /* 父元素的高度是固定的 */ } .child { height: 100%; /* 子元素的高度也会跟随父元素的高度变化 */ } ``` 希望这能帮到你。 ### 回答2： 要实现父元素高度自适应，子元素高度跟随父元素自适应，可以使用CSS的flex布局。 首先，为父元素添加以下样式： ```css .parent { display: flex; flex-direction: column; } ``` 上述代码将父元素设置为flex布局，并且设置主轴方向为竖直方向。 然后，为子元素添加以下样式： ```css .child { flex: 1; } ``` 上述代码中的`flex: 1`表示子元素会占据父元素剩余的空间，从而实现子元素高度跟随父元素自适应。 最后，将父元素和子元素的高度设置为100%： ```css html, body, .parent, .child { height: 100%; } ``` 上述代码中的`html, body`是为了确保整个页面都能够自适应高度，`.parent`和`.child`是为了使父元素和子元素的高度都为100%。 以上就是实现父元素高度自适应，子元素高度跟随父元素自适应的代码。 ### 回答3： 实现父元素高度自适应，子元素高度跟随父元素自适应，可以通过以下CSS代码实现： 父元素样式： ```css .parent { display: flex; flex-direction: column; } ``` 子元素样式： ```css .child { flex-grow: 1; } ``` 以上代码中，父元素使用了flex布局，并设置了flex-direction为column，表示子元素会在垂直方向上从上到下排列。 子元素的样式中，使用了flex-grow: 1，表示子元素会占据剩余空间，使其高度跟随父元素的自适应。 通过以上代码，父元素的高度会自适应子元素的高度，同时子元素的高度也会跟随父元素的自适应变化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值