Can I use? http://caniuse.com/ Less http://lesscss.org Cool Libraries Bootstrap from Twitter Jetstrap
这是一个创建于 2729 天前的主题，其中的信息可能已经有所发展或是发生改变。
左边图片，中间文字，右边图标分别为 3 个 div
flex 布局后，变成了水平
左边 div 设置宽高，背景图宽高
中间文字部分仅设置了如下，让其显示省略号
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 我找到了解决办法是将中间的的 div 设置为 flex：1，左右均可完整显示
但我的理解是，div 是水平排布的，如果是由于中间过长，也应该完整显示左边的图片，右边的图片被压缩，而事实是左边图片被压缩，求解为什么？
 | 1 noe132 2018-04-23 23:44:39 +08:00 左边的 flex-shrink 设置成 0 没有？ 宽度不够时，flex-shrink 不为 0 的子元素会被按照超过的宽度，以属性值为比例压缩。 如果希望元素在 flex 布局中不扩展也不被压缩，设置 flex: 0 0 auto 或者 flex: none 就可以了。 |
 | 2 lightening 2018-04-24 00:47:39 +08:00 默认应该是等比缩放吧。文字应该也缩了，只不过文字缩了给省略号看起来不是很糟糕。 左边的图片和右边的图标应该给 flex-shrink: 0。中间的文字可以给 flex-shink: 1 (默认)，和 flex-grow: 1。 也可以用简写：左边和右边：flex: none （等于 0 0 auto) ; 中间文字: flex: auto (等于 1 1 auto ）; 这个关于 flexbox 的页面基本涵盖所有东西了： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ |
 | 4 sevenQu OP @lightening 嗯嗯，谢谢，明白了，原来是这样 |
Select Language