display:flex的子元素无法设置宽度

最新推荐文章于 2025-09-30 12:33:39 发布
原创 最新推荐文章于 2025-09-30 12:33:39 发布 · 2.4w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了使用Flex布局制作轮播图时遇到的问题，包括如何让轮播图的宽度适应屏幕宽度及实现平滑滑动。通过调整子元素的flex-shrink属性和设置父元素的宽度，可以解决图片不按预期显示和滑动的问题。

使用display:flex制作轮播图的时候，想让每张轮播图的宽度width="100%",即屏幕的宽度，但是设置了没有用，后来发现，因为dispaly:flex是流式布局，子元素有个flex-shrink属性，表示在父元素宽度不够的情况下是自动收缩不？0表示不自动收缩，1表示自动收缩；所以将子元素（图片）添加属性：flex-shrink:0;即可

如果想让轮播图滑动，比如设置父元素的left：20%，如果父元素没有设置width,会发生子元素图片拉长20%，但是不动的情况；

kalinux
关注
前端学习（259）:flex-flow
歌谣的博客
12-30 558
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
display: flex和display: inline-flex区别
风情
08-26 1290
play: flex和都是CSS中的属性，用于创建Flexbox容器，但它们在布局表现上有一些关键区别。
css display:flex 弹性布局 子标签设置宽度无效的问题
qq_35181466的博客
02-14 8130
表面原因: 一个父标签中嵌入了两个子标签，当父标签设置display:flex之后。即使子标签设置了宽度都是50%，但是如果左边子标签内容多，则左边子标签会挤掉右边子标签的一部分，所以导致了右边的宽度显示有问题。 根本原因： 父元素设置了display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能，所以才会有左边子标签会挤掉右边子标签的一部分的问题。 因此其中一种做法是：我们可以让该标签的自动收缩关
【bug记录5】flex横向布局时子元素设置宽度无效
weixin_57208584的博客
08-17 1969
对父元素list使用了flex布局之后，尝试将其子元素item固定宽度，但发现。宽度设置不生效并且实际宽度被压缩了。，代表元素不允许被弹性布局挤压。优先适配自己的父元素的宽度。在item子元素里面加一个。
给父元素设置display:flex之后里面的子元素设置宽度无效的问题---给宽度无效的子元素添加flex-shrink: 0；
weixin_42017221的博客
09-30 151
因为flex容器里面的弹性元素默认是收缩的，宽度被收缩了，即默认flex-shrink:1。问题：flex布局下，子元素的合计宽度是无法超过父元素的宽度。即使单独设置也是没有用的。父元素设置了flex之后，导致内部的block布局变成了flex布局，在子元素们加起来的宽度<父元素宽度的情况下，子元素宽度是有效的，但是一旦子元素们撑破父元素，就会导致有些子元素设置宽度无效，
display flex设置宽度无效
qq_28500793的博客
03-08 7125
display flex设置宽度无效 我们在做flex布局的时候会经常用到这种 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-wid
父组件已经有display: flex;，子组件有必要在设置display: flex吗
08-29
用户的问题是：当父容器已经设置了display: flex，是否还需要为子元素（直接子元素，即flex items）设置display: flex？ 根据Flexbox规范： 1. 父容器设置`display: flex`或`display: inline-flex`后，其直接子元素...
display: flex让子元素自适应
01-14
通过设置父容器的 `display: flex` 属性，可以创建一个弹性盒子模型来管理子元素的排列方式。为了实现子元素的自适应布局，通常会结合其他 Flexbox 的属性一起使用。 #### 设置父容器样式 ```css .parent { ...
display：flex第一个元素宽度固定，第二个宽出超出自动换行
07-25
若要在 flex 容器内让第一个元素宽度固定而允许第二个元素超出宽度并自动换行，则您可以采用以下方法： ### 示例代码 ```html 固定宽度内容 可变宽度的内容 .container { display: flex; } .fixed-width {...
display： flex时设置宽度怎么生效
最新发布
11-13
确保父元素有足够的宽度容纳子元素，可使子元素宽度设置生效。 ```css .parent { display: flex; width: 600px; border: 1px solid black; } .child { width: 200px; height: 50px; background-color: light...
父元素display:flex布局下的子元素宽度无效问题
weixin_40365953的博客
11-09 1万+
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。 该属性介绍: 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 根据上述介绍可以理解为默认 1 为开启收缩 所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto; 解决了display:flex下的子元素设置宽度无效的问题。...
Flex导致设置的width:100%不生效问题
热门推荐
Johnny Liao的博客
10-15 2万+
因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置） flex-shrink: 0; width: 100%; 这样就可以生效了。 ...
flex 布局中子元素设置宽度无效的解决办法
UserGuan的博客
01-05 1万+
因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。默认值：0 1 auto。
弹性盒子display：flex
你还有我
12-21 3787
目录弹性盒子flex-direction 排列方向flex-wrap规定是否换行justify-content主轴排列align-items侧轴排列方式单个元素的align-selfflex-grow放flex-shrink缩flex-basisorder 弹性盒子 声明定义： 使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。 【注】一般是使用display:flex. inline-flex极少用。 flex:如果没有为父
解决父元素display:flex布局下的子元素宽度被压缩问题
Arana_liu的博客
05-23 367
解决父元素display:flex布局下的子元素宽度被压缩问题
关于flex布局中子元素宽度失效的问题
weixin_44703304的博客
04-04 1万+
在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后； 子元素设置固定宽度： width:50px; height:50; 这里加上另外一...
html中设置flex，子元素的宽度失效
wei80231996的博客
07-23 433
1.直接给子元素设置 flex-grow: 0; flex-shrink: 0;
display: flex 子元素中间间隔
03-15
- **适用场景**：需要精确控制子元素宽度与间隔比例时 --- ### 各方法对比 | 方法 | 优势 | 局限 | |-------|---------------------|---------------------| | gap | 代码简洁，控制方便 | IE 不兼容 | | margin| ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值