flex布局子元素flex:1会动态变化?

张巨侠
  • 331
.container{display: flex;width: 120px;}
.box{flex:1;height:30px;background: red;margin: 3px;overflow: hidden;
     text-overflow: ellipsis; white-space: nowrap;}
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>

image.png
一开始设置好好的,但是一添加文字就宽度就动态变化了,如何让他不变化,一直保持初始化的宽度
image.png

回复
阅读 364
3 个回答
✓ 已被采纳

flex: 1 0;
你可以简单理解为第一个参数表示是否放大,第二个参数表示是否缩小。

image.png

因为文本长度超过了flex:1的宽度,所以盒子会被撑开,要想盒子长度保持不变,
可以加上flex-shrink:0来指定flex元素的收缩规则

你知道吗?

宣传栏