前端

flex布局元素被挤压

问题

先看个常见的需求，元素A 设置了固定宽度 100px，但当元素B内容过多时会挤压A的宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  .container {
    display: flex;
    flex-direction: row;
    width: 200px;
    border: 1px solid #999;
  }
  .a {
    width: 100px;
  }
</style>

<div class="container">
  <div class="a">leiem.cn</div>
  <div>先看个常见的需求，元素A 设置了固定宽度 `100px`，但当元素B内容过多时会挤压A的宽度。</div>
</div>

image-20220511122609088

可以看到总宽度 200px 元素A 设置的宽度 100px 应该占据一半的空间，但展示的效果明显被挤压了。

解决方法

处理办法也很简单就是 flex-shrink 属性，该属性定义了当父元素主轴空间不足时子元素的缩小比例。具体怎么缩小还受其他属性的影响，我们这里就不展开详述了，因为大部分情况下也不会遇到那么复杂场景。

针对上述例子只需要在元素A上添加 flex-shrink: 0 即可解决。

1
2
3
4
.a {
  width: 100px;
  flex-shrink: 0;
}

添加后的效果，完美解决 😄

image-20220511123334535