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

最新推荐文章于 2024-07-16 16:30:54 发布
最新推荐文章于 2024-07-16 16:30:54 发布
阅读量2.4w 收藏 9
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kalinux/article/details/84020954
版权

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

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

kalinux
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
使用flex布局时，宽度超限，一行显示 ，图片缩小变形了，怎么解决？
12程序猿的博客
10-16 4000
1.问题： 在做微信小程序项目时，使用flex布局时，宽度超限时，一行显示 ，发现图片缩小变形了，在同事的帮助下解决了问题，现把解决方法记录下，以便之后查看。 2.解决方法： flex布局下的元素使用flex-shrink属性 （1）.flex-shrink具体是做什么的，请看如下介绍： 比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。我擦，这不脑残么？ 超了怎么办？还有得救。flex-shrink 按比例压缩。 <style> h1{font
display：flex布局语法
11-20
当一个容器被设置为flex布局后，它的子元素（flex项目）的布局将受Flex模型控制。Flex模型包括两根轴：主轴（main axis）和交叉轴（cross axis）。主轴是Flex项目的布局方向，交叉轴垂直于主轴。 2. Flex容器的属性...
css display:flex 弹性布局 子标签设置宽度无效的问题
qq_35181466的博客
02-14 6727
表面原因: 一个父标签中嵌入了两个子标签，当父标签设置display:flex之后。即使子标签设置了宽度都是50%，但是如果左边子标签内容多，则左边子标签会挤掉右边子标签的一部分，所以导致了右边的宽度显示有问题。 根本原因： 父元素设置了display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能，所以才会有左边子标签会挤掉右边子标签的一部分的问题。 因此其中一种做法是：我们可以让该标签的自动收缩关
父元素flex:1，子元素height:100%无效解决方案
weixin_46447553的博客
07-16 558
父元素flex:1，子元素height:100%无效解决方案及代码示例
display flex设置宽度无效
qq_28500793的博客
03-08 6976
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
Flex导致设置的width:100%不生效问题
热门推荐
Johnny Liao的博客
10-15 2万+
因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置） flex-shrink: 0; width: 100%; 这样就可以生效了。 ...
父元素display:flex布局下的子元素宽度无效问题
qq_43220086的博客
05-29 822
子元素设置flex-shrink：0即可解决 flex-shrink默认值为1是开始收缩 0是不收缩
纯CSS让子元素突破父元素的宽度限制
11-19
在CSS布局中，我们经常遇到子元素无法突破父元素的宽度限制的问题，这是因为在默认情况下，子元素的宽度是受限于父元素的宽度的。但是，有时候我们需要子元素突破父元素的宽度限制，以实现某些特殊的布局效果。 在...
详解css display:box 新属性
09-24
如果子元素设置了固定宽度，那么这个宽度会被优先使用，其他没有固定宽度的子元素则根据`box-flex`值按比例分配剩余空间。如果有`margin`值，它们会在剩余空间内按比例计算。 3. **box-orient: horizontal/vertical...
CSS中display flex整理（布局利器）
11-21
例如，在一个宽度为300px的红色边框容器中，设置了`display: flex`和`flex-direction: row`，四个不同颜色的子元素会水平排列，如果改变`flex-direction`的值，排列方式就会相应改变。 ### `flex-wrap`属性 `flex-...
html中设置flex，子元素的宽度失效
wei80231996的博客
07-23 380
1.直接给子元素设置 flex-grow: 0; flex-shrink: 0;
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。
flex布局之作用在子元素上的属性
weixin_43465508的博客
03-29 1078
flex-growflex-shrinkflex-basis默认值是，表示不占用剩余的空白间隙扩展自己的宽度扩展来分配左边的空隙子元素宽度 = 子元素宽度+（父元素宽度-子元素宽度）*（小数） 1.2多个元素的时候，0-1之间的数，每个子元素分配与单个的情况不变，大于一的时候按占比来分配 2、flex-shrink -- 收缩比列 默认值 自动收缩 跟容器的大小相同 flex-shrink: 1; 如果是 0 那就不收缩 flex-shrink: 0; 超出父元素的宽度与这个系数做乘法运算
css dispay设置flex后width属性无效
烽人的博客
04-13 800
css 当dispay设置flex后width属性无效的问题 解决办法之一： 用min-width代替
关于flex布局中子元素宽度失效的问题
weixin_44703304的博客
04-04 1万+
在弹性布局中，用上flex后发现会上瘾，因为这个属性实在太好用了。有一种情况是左边我设置一个子元素固定宽度，右边设置自适应占满剩余空间，但有时候会发现左边固定元素的宽度竟然失效了，被右边的元素挤占空间了，所以仔细查看flex属性的特点后，发现少设置了一些属性样式。 父元素设置完 display:flex 属性后； 子元素设置固定宽度： width:50px; height:50; 这里加上另外一...
CSS(4) CSS3伸缩布局
zhaocuit的博客
01-28 486
1、传统css布局的局限性 布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便。 CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 2、CSS3伸缩布局 display: flex; 设置父容器为伸缩盒子，会使每一个子元...
flex 子元素固定宽度_css3系列之弹性盒子 flex
az44yao的专栏
06-07 8862
作者：杨耿 https://www.cnblogs.com/yanggeng/p/11212526.html 弹性盒子(伸缩盒) 注意，本篇会很长，非常长， 因为弹性盒子的知识点比较多 搜索 弹性盒子的属性ctrl + F如果觉得图太小， ctrl + +键 主要的属性有：(主要分两部分讲， 一部分讲 设置在父元素上的属性，一部分讲 设置在子元素上的属性， 还有最后一些简单的应用) 　　flex 　　flex-grow 　　flex-shrink 　　flex-basis ...
css父子盒子的width问题
qq_44718039的博客
06-22 3995
css父子盒子的宽度问题
html 防止display:flex 导致里面的两个100%宽度的子容器挤在同一行
WenZhengshi的博客
01-19 400
* 设置为 wrap，以便在需要时换行 */
display：flex第一个元素宽度固定，第二个宽出超出自动换行
最新发布
07-25
若要在 flex 容器内让第一个元素宽度固定而允许第二个元素超出宽度并自动换行，则您可以采用以下方法： ### 示例代码 ```html 固定宽度内容 可变宽度的内容 .container { display: flex; } .fixed-width {...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值