Flex弹性布局元素被挤压变扁问题解决

flex.png Flex弹性布局元素被挤压变扁问题解决 经验总结

像这种，如果子元素的宽度过大，就会出现被挤扁的情况，不能显示实际的宽度。

解决方法：

有一个 flex-shrink 属性，可以解决元素被挤压的问题。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-shrink 的默认值为 1，如果没有显示定义该属性，将会自动按照默认值 1 在所有因子相加之后计算比率来进行空间收缩。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。

这里将 flex-shrink 的值设为 0 ，元素就不会被挤扁了。

flex-shrink: 0;