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

最新推荐文章于 2025-03-25 17:35:59 发布
最新推荐文章于 2025-03-25 17:35:59 发布
阅读量4.4k 收藏 4
点赞数 5
分类专栏： css 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Auroral_Su/article/details/122859930
版权
本文探讨了CSS Flexbox布局中，将父元素的align-items属性从center改为stretch的重要影响。通过align-items: stretch;，子元素能够自适应填充父元素的垂直空间，实现更好的内容展示和布局优化。这一调整对于前端开发者理解和优化网页响应式设计至关重要。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

.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; 重点

flex布局---子元素未设置高度，默认与父元素同高---侧轴方向的拉伸
weixin_45871977的博客
07-08 1260
flex布局-----子元素未设置高度，默认与父元素同高---侧轴方向的拉伸
flex布局下父子元素的高度
qq_43111808的博客
06-08 7956
父元素为flex布局时： 没有设置高度的子元素与父元素高度一致。 1，如果父元素设置固定高度，则子元素中没有设置高度的元素将继承父元素的高度； 2，如果父元素没有设置高度，其高度由最高的子元素决定。 代码中可以将.father的高度注释一下对比。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
@css flex 布局子内容将父元素撑开
weixin_43809685的博客
09-01 3213
flex 布局子内容被撑开 遇到的问题： 需要显示的文本是通过富文本编辑器提交是文本（包含了p标签），展示时通过flex布局实现。如下图： 但是通过flex布局实现后发现文本内容过长时将后半部分整体撑开了，导致整个卡片内容被撑开了 解决： 通过给富文本编辑器生成的p标签设置flex:1;width:0px;的方式使整个p标签的宽度由flex属性去决定 （也就是有p标签的父元素宽度所决定），再通过设置溢出隐藏的css属性实现溢出隐藏。 overflow: hidden; white-space: nowra
flex布局中子元素自适应高度
最新发布
技术客的专栏
03-25 211
2. 只需要父级容器 items-center 去除或者使用 items-stretch 使用 flex 容器的默认行为就可以了。开发中遇到这个情况,想右边的按钮高度自己撑开。
flex布局 ——子元素保持自身高度
追逐知识的过程最能使我们意识到自己的无知...
12-01 6009
flex布局 ——子元素保持自身高度，不跟随父元素高度自适应
flex 布局，子元素会撑开父元素
08-19 8830
<div class="box"> <div class="a"></div> <div class="b"></div> </div> .box { display: flex;} .b { flex: 1; } ...
flex布局，子元素撑开父元素
热门推荐
大兵的猫
04-03 1万+
1.将父元素设置为display:flex时，子元素不设高度时（宽度需要设置）会默认撑开满父元素高度： 2.经典两栏布局 如果child1有子元素的话，并且子元素宽度过大，会撑开child1，将child2的宽度挤压，如下： 解决办法将child1的宽度设置为：width:0; ...
子元素高度自适应,父元素完整展示前两个元素
06-02
具体做法是将父元素设置为flex容器，子元素的高度设置为自适应，并且将父元素的flex-wrap属性设置为wrap。这样可以让子元素自动换行，并且前两个子元素会完整展示出来。 以下是示例代码： HTML: ``` 子元素1 ...
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
然而，当涉及到iframe的高度自适应时，如果子页面与父页面不在同一个域名下，就会出现JavaScript跨域问题，导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略，以下是一些常用的方法： 1. **...
css子元素不撑开父元素
03-14
在CSS布局中，默认情况下，当父级元素的高度是自动（auto），并且其内部包含了浮动或绝对定位的子元素时，这些子元素不会影响父元素高度，导致父元素无法根据内容大小调整自身的尺寸，即我们常说的“子元素不撑开父...
父DIV自动适应子DIV高度
03-30
2. **使用Flexbox布局**：Flexbox是CSS3中的一种新的布局模式，可以轻松地实现父元素自动适应子元素高度。设置`display: flex;`在父元素上，再使用`align-items: stretch;`让子元素在垂直方向上拉伸填满父元素。这种...
css高度不随父元素
03-15
好的，我需要解决用户关于CSS中子元素高度不随父元素变化的问题。首先，我需要分析这个问题的可能原因和解决方法。根据用户提供的引用，尤其是引用[4]中提到使用clear类来清除浮动，这可能是关键点之一。 首先，...
flex: 1； 子元素高度较高时不展示滚动条而是撑开父元素
xiaoxiannv666的博客
10-14 3994
flex布局中，flex: 1; overflow: auto;的子元素没有如期展示滚动条，而是被内容撑开高度；
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
weixin_44095605的博客
07-06 671
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高, 父元素一要设置flex,flex-direction 子元素设置占位1
css 文本排版方向，古文式排版等
全易
10-12 996
语法： writing-mode: horizontal-tb 或者 vertical-rl 或者 vertical-lr 或者 sideways-rl 或者 sideways-lr; 解释： horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-...
弹性布局flex或者grid元素平分，实际会被内容撑大，问题剖析
云淡风轻的博客
09-22 1481
控制flex元素，有三个属性控制，flex-basis，flex-shrink，flex-grow。通过上面弹性布局和元素width分析，当元素支持收缩时，min-width默认是auto，即元素内容的宽度，所以会导致item撑出平分的宽度！如果设置宽度，由于是弹性布局，宽度也会被伸缩！flex-grow 值为整数，默认是0， 分配可用空间，如果其他元素也被允许延展，那么他们会各自占据可用空间的一部分；元素item平分，就需要在每个item设置flex:1，即自动伸缩，每个item伸缩等级都一样！
html中布局，让下一个子元素占据剩余的高度
weixin_34341229的博客
05-04 544
    ---------------------------------------------------------------------- 原因是： height:100% 引起的， 这句话的意思是，子元素的高度为父元素高度的100%，也就是和父元素（容器）的高度相等。 这样当父元素中有两个块级子元素时，假设父元素高度300px, 如果第一个子元素的高度是100，第二个子元素的高度是1...
css flex 子元素溢出时，父元素被撑开解决方案
weixin_48230016的博客
07-03 6591
3.无论多少层子元素，只要不想给限制的宽高，想让元素flex：1；自适应宽高，都一层层给flex为1时的元素 宽或高 为0限制下去。可以用于解决子元素溢出，撑大父元素，父元素不出现滚动条等问题。自适应填满时，子元素内容溢出，父元素内容撑大，导致页面显示问题，或设置了overflow 为scroll 的元素没出现滚动条等问题。2.同上，如果是纵向排列，flex: 1;的元素是高度铺满的，那就加上height: 0;则元素高度自适应的同事，高度不会被撑大。1.如果是横向排列，flex: 1;
flex弹性布局 子元素高度不撑满父元素高度问题
weixin_46180366的博客
04-17 8473
例如：在项目中会有做多级表格的需求，例如下图，一级数据放在表格左边，数据的多个子项item放在右边，由于数据是动态的所以不固定高度。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值