flex布局中，子元素的高度不正常（被拉伸）

已于 2022-11-08 10:29:09 修改
阅读量2.3k 收藏
点赞数 1
文章标签： css 前端
于 2022-11-04 10:39:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43951592/article/details/127684392
版权

解决方法：
子元素 height: 0

解决方法二：
父元素 align-items: flex-start

har01d
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
button元素、div等块级元素、span等行内元素在flex容器里会被拉伸
zbailing的博客
09-10 874
htm代码如下： <div class="box"> <button class="btn">click</button> </div> 一、在flex容器下，button表现为纵向拉伸 .box { width: 400px; height: 200px; background-color: #eee; padding: 16px;
flex 高度或者宽度被拉伸解决方案
qq_57052578的博客
12-25 751
正常两栏布局，但如果b得子元素太宽，会撑开b，导致a的宽度被挤小 将b的宽度设置为width: fit-content;，就可以解决，高度也是一样的。总结： flex布局，如果自身高度或者宽度被拉伸了，直接把自己的高度或者宽度设置为具体数值即可。
使用flex布局，子元素怎么高度自适应？
风华绝代的博客
11-01 7522
1、想用flex实现这种布局 2、各个子元素高度不固定，从上到下依次排列 请问可以怎么实现？ 附： 我对父元素定义了下面的规则： display:flex; flex-flow:row wrap; 对子元素用p标签放了一些文本，未设置高度，结果显示效果如下红色标记是子元素被拉伸了，高度没有自适应： 父元素上增加align-items: flex-start; 因为交叉轴的对齐方式，默认是 stretch ...
flex布局(弹性布局、伸缩布局)
weixin_45674894的博客
10-09 3058
flex是CSS3中的一种布局方式 主要介绍下弹性布局的常用的一些属性 当一个盒子设置为display:flex的时候,盒子会变为一个弹性盒子,盒子内部的子元素会默认沿着主轴方向排布,此时会引出主轴和侧轴的概念。 主轴:默认水平向右(类似于X轴) 侧轴:与主轴垂直的就是侧轴,默认垂直向下(类似于Y轴) 主轴方向（flex-direction) 弹性盒子的主轴方向默认水平向右,但是可以通过flex-...
CSS开发技巧（四）：解决flex多行布局的行间距异常、子元素高度拉伸问题
热门推荐
u012443286的博客
12-12 1万+
asd
CSS基础：flex布局子元素被撑大（文本省略号）
u011863822的博客
03-28 5937
flex布局不但会让盒子撑大，而且还有自己在再使用超过文本长度使用省略号无效，所以聊一下解决方法。
浅谈CSS3中display属性的Flex布局的方法
09-24
由于`Flex布局`已被所有主流浏览器广泛支持，因此它是现代Web开发中不可或缺的一部分，尤其在创建自适应和移动优先的界面时。 总之，`Flex布局`为CSS3带来了一种强大且灵活的布局方式，使得开发者能够更加自如地...
Flex布局
03-29
容器（父元素）通过设置`display: flex`或`display: inline-flex`开启Flex布局，其所有子元素（项目）自动参与Flex布局。容器有两条轴：主轴（main axis）和交叉轴（cross axis）。主轴默认为水平方向，子元素沿着...
详解CSS3伸缩布局盒模型Flex布局
09-22
Flex布局，全称为Flexible Box布局，是CSS3中引入的一种全新的布局模式，旨在解决复杂的网页布局问题，特别是在处理响应式设计和动态内容时。Flex布局允许开发者更灵活地控制元素的大小、位置和顺序，即使元素尺寸...
【移动端网页布局】Flex 弹性布局案例 ③
03-06
1. 容器（Container）：Flex布局中的容器是指设置了`display: flex`或`display: inline-flex`的元素，它是弹性布局的主体，包含了一系列的子元素（项目，Items）。 2. 项目（Items）：容器内的所有直接子元素都被视...
微信小程序 Flex布局详解
09-01
弹性因子（flex-grow, flex-shrink, flex-basis）在微信小程序的Flex布局中，每个伸缩项目都可以通过flex属性来指定其弹性因子，它是一个简写属性，可以设置三个值：flex-grow, flex-shrink, 和 flex-basis。...
flex布局
weixin_58526727的博客
06-20 950
flex布局 和传统布局分别的使用场景 传统布局 兼容性好 布局繁琐 在移动端不能很好的布局 flex布局 操作方便，布局极为简单，移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持 建议PC端布局选择传统布局，移动端或者不考虑兼容性的PC端界面，使用flex布局。 flex 布局概念 flex 是 flexible Box的缩写，意味弹性布局。 为盒模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设为flex布局以后，子元素的f
CSS:父元素使用了Flex布局 导致子元素高度未撑开
yangwq的博客
01-21 6066
在使用van-swipe时发现swipe的高度不能被图片撑开，排查发现给swipe父元素设置了 #test { height: 100%; display: flex; flex-direction: column; } 解决方法：给子元素swipe增加属性flex-shrink:0，确保父元素不够大时子元素也不会被压缩。 #test { height: 100%; display: flex; flex-direction: column; .banner-box
flex弹性布局 子元素高度不撑满父元素高度问题
weixin_46180366的博客
04-17 7323
例如：在项目中会有做多级表格的需求，例如下图，一级数据放在表格左边，数据的多个子项item放在右边，由于数据是动态的所以不固定高度。
利用flex属性实现同父元素下子元素弹性扩展
zhzij的博客
08-30 577
利用flex属性实现同父元素下子元素弹性扩展
flex布局(弹性/伸缩布局)
weixin_65635437的博客
06-07 865
flex布局(弹性/伸缩布局)的介绍和属性
Flex容器背景图的拉伸和重复，backgroundImage拉伸
Xiang
05-27 4535
<br />拉伸很简单，在设置backgroundImage的时候记得把backgroundSize设置成100%即可。如果是写在css文件中。 有个小问题，就是100%需要用双引号括起来，像这样：backgroundSize: "100%";，否则出错（真想骂娘啊）。背景的重复就是背景图片没有容器那么大时，会把同一个图片重复画在容器上。这个东西的原理当然就是自己去画那个图片了。不过幸好 Defrafa这个组件库有了这个功能，而且很好很强大。查看这里，http://www.degrafa.org/samp
2024年公共文化与社会服务国际会议（ICPCSS 2024）
最新发布
wx19980549140的博客
07-12 1047
2024年公共文化与社会服务国际会议是一个集学术性、实践性和国际性于一体的盛会。我们期待与您共同探讨公共文化与社会服务的未来发展方向，为推动该领域的持续创新与发展贡献智慧和力量。随着社会的不断发展，公共文化与社会服务的重要性日益凸显。为了促进该领域的学术交流与合作，2024年公共文化与社会服务国际会议应运而生。本次会议旨在汇聚全球专家学者，共同探讨公共文化与社会服务的最新研究成果、发展趋势及面临的挑战，以推动该领域的持续创新与发展。
flex布局设置子元素
09-13
在 Flex 布局中，可以使用以下属性来设置子元素的样式： 1. `display`: 设置子元素的显示方式为 flex。例如：`display: flex;` 2. `flex-direction`: 设置子元素的排列方向。可以是 `row`（默认值，水平排列）、`column`（垂直排列）、`row-reverse`（水平反向排列）或 `column-reverse`（垂直反向排列）。例如：`flex-direction: row;` 3. `flex-wrap`: 设置子元素是否换行。可以是 `nowrap`（默认值，不换行）或 `wrap`（换行）。例如：`flex-wrap: wrap;` 4. `justify-content`: 设置子元素在主轴上的对齐方式。可以是 `flex-start`（默认值，左对齐）、`flex-end`（右对齐）、`center`（居中对齐）、`space-between`（两端对齐，项目之间间隔相等）或 `space-around`（每个项目两侧的间隔相等）。例如：`justify-content: center;` 5. `align-items`: 设置子元素在交叉轴上的对齐方式。可以是 `flex-start`（顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）、`baseline`（基线对齐）或 `stretch`（默认值，拉伸填满交叉轴）。例如：`align-items: center;` 6. `align-content`: 设置多行子元素在交叉轴上的对齐方式。可以是 `flex-start`（顶部对齐）、`flex-end`（底部对齐）、`center`（居中对齐）、`space-between`（两端对齐，项目之间间隔相等）、`space-around`（每个项目两侧的间隔相等）或 `stretch`（默认值，拉伸填满交叉轴）。例如：`align-content: center;` 这些属性可以分别应用于父容器（即包含子元素的容器）来设置子元素的布局。希望这些信息对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值