Flex导致设置的width:100%不生效问题

最新推荐文章于 2024-02-26 17:29:47 发布
最新推荐文章于 2024-02-26 17:29:47 发布
阅读量2w 收藏 10
点赞数 9
分类专栏： css 文章标签： flex width width100%不生效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013338742/article/details/83059618
版权

因为设置了display: flex; 导致block布局变成了flex布局， 所以如果想要在已经设置了flex布局的基础上，再进行子元素的宽100%设置的话，可以应用下面的样式：（在该子元素上设置）

flex-shrink: 0;
width: 100%;

这样就可以生效了。

JohnnyLiao_WJ
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
父元素使用flex子元素宽度100%失效问题
shi19970609的博客
09-28 1061
父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。
flex常见问题100题
08-09
flex开发过程中的常见问题100问答 flex开发过程中的常见问题100问答 flex开发过程中的常见问题100问答
CSS布局说——可能是最全的
weixin_34297704的博客
09-26 621
前言 现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。 其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了...
flex 布局时，如何固定一栏宽度?
最新发布
LuckyTHP
02-26 714
上面的样式就是固定宽度 200px。简单使用 width，可以。
html 防止display:flex 导致里面的两个100%宽度的子容器挤在同一行
WenZhengshi的博客
01-19 358
* 设置为 wrap，以便在需要时换行 */
flex布局常用属性总结
XiaoYi
07-21 1004
direction 控制主轴和交叉轴的方向 开始线和结束线flex-wrap-控制换行-控制主轴（横轴）上所有flex项目的对齐。-控制交叉轴（纵轴）上所有flex项目的对齐。align-self-控制交叉轴（纵轴）上的单个flex项目的对齐。-控制“多条主轴”的flex项目在交叉轴的对齐。flex-grow-分配空闲空间-分配负极空闲空间flex-basis-设置子项的宽度httpshttps。...
为什么你在在CSS里写的width: 100%无效？
kai212的博客
07-12 7018
为什么你写的width: 100%失效？作为一个萌新小白，学习的路上总能遇到让我意想不到的问题，最近学习弹性布局时突然发现设置的width: 100%无效而设置width: 100px则可以显示，也让我懵逼了许久
flex布局下width：100%失效和justify-content:space-between 失效的问题
weixin_45093753的博客
08-22 1538
flex布局下width：100%失效和justify-content:space-between 失效的问题
FLEX布局
long_yy_的博客
03-14 164
FLEX布局 Flex容器：采用 Flex 布局的元素的父元素；(父级) Flex项目：采用 Flex 布局的元素的父元素的子元素；（子级） 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex布局下的宽度的问题
m0_53438035的博客
07-30 4989
问题 flex布局下，宽度达到100%以上，发现无效即实际效果最多只能达到100%。 解答 我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。 flex-grow属性：定义项目的放大比例 flex-shrink属性：定义项目的缩小比例 解释： 1：flex-grow属性：定义项目的放大比例。默认值为0，即如果空间有剩余，也不放大。可以是小数，按比例占据剩余空间。 2：flex-shrink属性默认值为1，即如果空间不足将等比例缩小。如果有一个项目的值为0，其他项目为1，当空间不足时，该项目
父元素flex:1子元素height:100%失效的解决办法
热门推荐
CherryCola_zjl的博客
04-21 1万+
子元素设置height:100%，会发现高度并没有变化。网上搜了半天也没解决办法，就写一下 通过设置父元素height:0; 同理 width 。这个方法还能解决 flex:1 超出省略号css失效。 这个方法safari浏览器目前还不兼容，但是chrome有效 /* 父元素 */ .parent{height:0;} 父元素 与 子元素 通过定位解决。 /* 父元素 */ .paren...
父元素flex:1,子元素宽度100%失效的问题
weixin_47813845的博客
12-02 3532
今天做项目时遇见一个问题，父元素在设置flex:1来固定宽度撑满时，子元素设置width100%无效。经过尝试发现给父元素及设置flex:1的元素加上width:0可解决。即这样写： .parent{ flex:1; width: 0; .children{ width: 100%; overflow-x:scroll ; } } 但同时遇到了另一个问题，我发现这样设置后，即使width超过之后，横向滚动条依然不出现，经过尝试加上一句代码即可： .parent{
Flex读取XML不刷新问题
11-16
Flex读取XML不刷新问题
详解flex布局与position:absolute/fixed的冲突问题
01-19
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下： 项目实战： 我们现在想做一个头部的导航栏，又想用fixed把它固定在上方...
flex不显示GIF图片问题的另类解决方法
10-26
flex不显示GIF图片问题确实令人很头痛，不过我们可以用一些手段让其乖乖显示出来，具体的实现如下，需要的朋友可以参考下
水平居中的五种方法及其优缺点
Johnny Liao的博客
06-07 1788
test 第一种： .parent{ text-align: center; } .child{ display: inline-block; }优点：代码少，兼容性好  inline-block ie6-7不兼容（可用inline+zooom:1） 缺点：text-align 会将文字移动，有时需text-align:left解决； 第二种： .
css clip-path 的用法 制作菱形头像
Johnny Liao的博客
08-20 1036
img { max-width: 250px; margin: 20px; -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s; } img:hover { -webkit-c
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; overflow: hidden; } .popup img { position: relative; top: 50%; left: 50%; max-width: 100%; max-height: 100%; cursor: zoom-in;这是我的弹窗元素，需要怎么更改呢
07-08
如果您想要使用CSS来设置弹窗的样式，可以按照以下方式更改您的弹窗元素样式： ```css .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: none; overflow: hidden; display: flex; align-items: center; justify-content: center; } .popup img { max-width: 100%; max-height: 100%; cursor: zoom-in; } ``` 在这个样式中，我们使用`display: flex`、`align-items: center`和`justify-content: center`属性将图片垂直和水平居中显示在弹窗中。这样，无论图片的尺寸如何，它都会始终居中显示。同时，我们也移除了不再需要的`position`、`top`和`left`属性。 请确保您将这些样式应用于正确的元素上，以使其生效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值