css flex:1;min-width:0解决flex溢出原理
# 原理```
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
在 flex 布局中，如果没有使用 width 的理由，还是尽量使用 flex-basis 吧。
IE？滚粗~ 极品小猫 发表于 2022-5-6 14:04
在 flex 布局中，如果没有使用 width 的理由，还是尽量使用 flex-basis 吧。
IE？滚粗~ ...
这样不设置basic主要为了可以显示省略号，如果不设min-wdith/width/overflow，就没法那样显示
111(2222) 333
如果1疯狂延长
111111111111111111111111..(2222)333
这样的效果
我研究好久才写出来，哭了 极品小猫 发表于 2022-5-6 14:04
在 flex 布局中，如果没有使用 width 的理由，还是尽量使用 flex-basis 吧。
IE？滚粗~ ...
对了，话说之前聊得flex布局真的不如float布局！
我们公司项目flex布局过多并且都是弹性计算的，直接卡死老安卓机了...
(还有就是很期待grid布局....)
李恒道 发表于 2022-5-6 14:23
这样不设置basic主要为了可以显示省略号，如果不设min-wdith/width/overflow，就没法那样显示
111(2222) ...
经典的flex布局与省略号问题！
table 的时代过去了……迎来的是各种DIV容器BUG，里里外外，少了一个 witdh\height 就有可能导致容器塌陷的风险。
从前没有弹性盒子之前，都是 JS 去做省略号，多省心啊。 极品小猫 发表于 2022-5-6 15:07
经典的flex布局与省略号问题！
table 的时代过去了……迎来的是各种DIV容器BUG，里里外外，少了一个 wit ...
{:4_96:}可惜现在都是框架了，操作dom总是感觉很脏
如果各种问题能所有浏览器都一致还好，最起码能直接改
他妈的火狐没问题，谷歌有问题，前俩没问题，苹果有问题
三个都搞定了
低版本安卓又崩给你看
页:
[1]