flex 布局中子元素设置宽度无效的解决办法

这篇具有很好参考价值的文章主要介绍了flex 布局中子元素设置宽度无效的解决办法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。
其中 1 就是 flex 中的 flex-shrink 属性,表示开启元素的收缩功能,所以子元素宽度才会失效。

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。

默认值:0 1 auto

描述
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值,即为 0 1 auto。请参阅 initial。
inherit 从父元素继承该属性。请参阅 inherit。

解决方案

方案1

flex: 0 0 auto;
width: 200px;

方案2

flex: 0 0 200px;

方案3(推荐)

flex-shrink: 0;
width: 200px;

方案4文章来源地址https://www.toymoban.com/news/detail-797177.html

min-width: 200px;

到了这里,关于flex 布局中子元素设置宽度无效的解决办法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css中flex布局固定宽度盒子被压缩问题解决

    当一个flex布局,有固定宽度盒子和使用 flex: 1; ,当内容过多时固定宽度的盒子被压缩宽度。 给固定宽度的盒子设置 min-width 值 给固定宽度的盒子设置 flex-shrink: 0;

    2023年04月10日
    浏览(58)
  • flex 布局 子元素不设置宽高,高度撑满父元素的问题

    在 flex 布局中,我们通过 align-items 来控制元素在交叉轴上的对齐方式。 它可能取5个值: flex-start: 交叉轴的起点对齐 flex-end: 交叉轴的终点对齐 center: 交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch (默认值): 如果子元素未设置高度或者高度为auto,将占满

    2024年02月11日
    浏览(45)
  • 父容器display:flex后,子元素的内部元素height:100%无效的解决方法

         父容器display:flex后,子元素的内部元素height:100%无效解决方法 做项目时遇到这个问题,浅浅的记录一下趴~ 在网上看了很多种方法,感觉这个是最有效的 解救办法:父类容器设置 position:relative;子元素:position:absolute;height:100%;  效果图: 代码:  

    2024年02月06日
    浏览(42)
  • uniapp/小程序 scroll-view 中设置flex布局无效问题

    使用 scroll-view 设置横向滑动时在 scroll-view 元素上设置flex布局,没有生效 在 scroll-view 下再加一层 view 包着 scroll-view 的内部元素,并在新增的这层 view 中设置 flex 布局: 👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者

    2024年02月15日
    浏览(50)
  • flex布局下 元素溢出滚动

    在我们平时使用flex布局时,flex布局的子元素大小并不是不变的,就算是我们设置了固定的宽高,其子元素的大小也是弹性变化的,会随着子元素的多少而变化 此时就利用到了对 flex-basis flex-shrink flex-grow 这三个属性的理解,其代码如下

    2024年02月13日
    浏览(37)
  • 解决flex布局中justify-content设置成space-between后因数据问题导致最后一行布局错乱

    在常用的flex布局中,当页面展示商品时,因为数据的不确定,导致justify-content设置成space-between,最后一行布局错乱   解决办法就是在小盒子后面添加标签 i 或者span标签,然后不设置高度,宽度和小盒子.box 下的div宽度一样就可以 问题来了设置几个呢,答案是设置该行的n-

    2023年04月16日
    浏览(40)
  • 2022-11 CSS:flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

    如上图第二行子元素宽度会跟随第一行宽度 解决方案: 对第二行设置: width: max-content; 使其宽度跟随自身内容 如上图,左侧宽高为112rpx,宽度不生效 解决方案: 对左侧图片设置宽高的同时, 设置最小宽高 效果如下: 例1:

    2024年02月09日
    浏览(59)
  • Element UI 使用 table 组件设置 el-table-column 宽度width为百分比无效的问题解决方案

    使用 Element el-table 组件时,给列 el-table-column 设置百分比 % 宽度无效( width=\\\"30%\\\" ) Vue中要将 el-table-column 的宽度设置成百分比的话,不能通过设置 width 来实现,而是要设置 min-width ,并且每一列都必须设置 min-width 。 el-table 组件会被 vue 解析成 html ,Vue直接把百分号去掉把数值当

    2023年04月08日
    浏览(98)
  • Ubuntu16.04设置静态IP以及修改无效的解决办法

    Ubuntu16.04设置静态IP 由于最近部署Hadoop完全分布式,需要设置静态IP,下面简单介绍一下: ubuntu16.04设置静态ip方法: 查看当前IP地址: 输入命令:ifconfig 这里要注意,我第一次敲命令的时候,只出现了lo这一块网卡,并没有出现ens16 最后改了半天都不能成功,后面用ifconfig

    2023年04月08日
    浏览(44)
  • java poi excel 设置单元格富文本 粗体无效解决办法

    //富文本样式(一个单元格含有的多种样式格式)设置粗体无效解决办法 //设置RichTextString 的时候,给 font 设置 setBold(true) ; setItalic(true) 粗体 斜体 ,发现在office有效果,在wps 看不到加粗斜体效果。 //原因是而程序生成的加粗是b val=\\\"true\\\"/电脑的生成的xlsx的加粗是b/,所以解决

    2024年02月15日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包