上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

css flex:1;min-width:0解决flex溢出原理

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    328

    主题

    2877

    帖子

    2888

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2888

    猫咪币纪念章

    发表于 2022-5-5 22:17:48 | 显示全部楼层 | 阅读模式

    原理

    By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See §4.5 Implied Minimum Size of Flex Items.)

    默认情况下,flex选项不会缩小低于他的最小内容尺寸(长单子的长度或固定尺寸元素),改变这个问题可以去设置min-wdith或min-height属性,具体可以参考4.5的flex选项的潜在最小尺寸

    一句话

    默认最小尺寸是内容尺寸,所以导致溢出,直接设置为0就可以让最小尺寸低于内容尺寸来解决溢出问题

    PS

    4.5的潜在最小尺寸这里太复杂了....
    很多英语名字我都没搞懂
    有机会再细研究一下

    参考

    https://dfmcphee.com/flex-items-and-min-width-0/
    https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/#flex-common

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    慵懒
    2022-6-14 16:43
  • 签到天数: 23 天

    [LV.4]偶尔看看III

    3

    主题

    45

    帖子

    63

    积分

    初级工程师

    Rank: 4

    积分
    63
    发表于 2022-5-6 14:04:14 | 显示全部楼层
    在 flex 布局中,如果没有使用 width 的理由,还是尽量使用 flex-basis 吧。
    IE?滚粗~
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    328

    主题

    2877

    帖子

    2888

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2888

    猫咪币纪念章

    发表于 2022-5-6 14:23:55 | 显示全部楼层
    极品小猫 发表于 2022-5-6 14:04
    在 flex 布局中,如果没有使用 width 的理由,还是尽量使用 flex-basis 吧。
    IE?滚粗~ ...

    这样不设置basic主要为了可以显示省略号,如果不设min-wdith/width/overflow,就没法那样显示
    111(2222)                                          333
    如果1疯狂延长
    111111111111111111111111..(2222)333
    这样的效果
    我研究好久才写出来,哭了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    328

    主题

    2877

    帖子

    2888

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2888

    猫咪币纪念章

    发表于 2022-5-6 14:25:23 | 显示全部楼层
    极品小猫 发表于 2022-5-6 14:04
    在 flex 布局中,如果没有使用 width 的理由,还是尽量使用 flex-basis 吧。
    IE?滚粗~ ...

    对了,话说之前聊得flex布局真的不如float布局!
    我们公司项目flex布局过多并且都是弹性计算的,直接卡死老安卓机了...
    (还有就是很期待grid布局....)

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2022-6-14 16:43
  • 签到天数: 23 天

    [LV.4]偶尔看看III

    3

    主题

    45

    帖子

    63

    积分

    初级工程师

    Rank: 4

    积分
    63
    发表于 2022-5-6 15:07:39 | 显示全部楼层
    李恒道 发表于 2022-5-6 14:23
    这样不设置basic主要为了可以显示省略号,如果不设min-wdith/width/overflow,就没法那样显示
    111(2222)   ...

    经典的flex布局与省略号问题!

    table 的时代过去了……迎来的是各种DIV容器BUG,里里外外,少了一个 witdh\height 就有可能导致容器塌陷的风险。

    从前没有弹性盒子之前,都是 JS 去做省略号,多省心啊。
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    328

    主题

    2877

    帖子

    2888

    积分

    荣誉开发者

    非物质文化遗产社会摇传承人

    Rank: 10Rank: 10Rank: 10

    积分
    2888

    猫咪币纪念章

    发表于 2022-5-6 15:17:14 | 显示全部楼层
    极品小猫 发表于 2022-5-6 15:07
    经典的flex布局与省略号问题!

    table 的时代过去了……迎来的是各种DIV容器BUG,里里外外,少了一个 wit ...

    可惜现在都是框架了,操作dom总是感觉很脏
    如果各种问题能所有浏览器都一致还好,最起码能直接改
    他妈的火狐没问题,谷歌有问题,前俩没问题,苹果有问题
    三个都搞定了
    低版本安卓又崩给你看
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表