巧妙运用flex布局:flex: 1; width: 0;避免子元素挤压
在Flex布局中,如何防止设置了flex: 1;的子元素挤压前面的元素,是一个常见的布局难题。本文将分析flex: 1; width: 0;这一组合的妙用,以及其背后的机制。
以下代码片段展示了这个问题:
<div style="width: 350px; display: flex;"> <div style="width: 50px; height: 50px; background-color: blanchedalmond;"></div> <div style="flex: 1; width: 0; white-space: nowrap;"> <div>css3 flex布局,文字超出.css3 flex布局,文字超出.css3 flex布局,文字超出.</div> </div></div>
登录后复制
本文来自互联网或AI生成,不代表软件指南立场。本站不负任何法律责任。