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

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

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

解决方法:

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

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

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

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

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

flex-shrink: 0;


未经允许不得转载:Web前端开发资源网 » Flex弹性布局元素被挤压变扁问题解决

推荐阅读:

设置SSL后如何实现https自动跳转

使用flexible后 不同设备的data-dpr还始终为1解决方法

Vue.js学习笔记——项目目录结构

20180410博客更换服务器步骤

2018年4月24日 服务器换成腾讯云

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)