css中flex后文本溢出的问题

原因:

为了给flex item提供一个合理的默认最小尺寸,flex将flex item的min-width 和 min-height属性设置为了auto

flex item的默认设置为:

min-width: auto 水平flex布局

min-height:auto 垂直flex布局

解决办法:

都是占50%,都完全ok

javascript 复制代码
// 1.都不超长:ok;2.前超,后不超:ok;3.前不超后超:ok;4.都超:ok
  width: 0;
  flex:1;
javascript 复制代码
// 1.都不超长:ok;2.前超,后不超:ok;3.前不超后超:ok;4.都超:ok
flex:1;
min-width: 0;
javascript 复制代码
// 1.都不超长:ok;2.前超,后不超:ok;3.前不超后超:ok;4.都超:ok-多margin
width: 50%;

最大50%,默认左对齐,ok


javascript 复制代码
// 1.都不超长:ok-左对齐的;2.前超,后不超:ok-左对齐的;3.前不超后超:ok-左对齐的;4.都超:ok-多margin
max-width: 50%;

同步溢出或者不溢出

javascript 复制代码
// 1.都不超长:ok-同步-左对齐;2.前超,后不超:ok-要溢出都溢出,要不溢出都不溢出,同步的;3.前不超后超:ok-要溢出都溢出,要不溢出都不溢出,同步的;4.都超:ok
overflow: hidden;

参考:https://blog.csdn.net/weixin_45753473/article/details/127620010

相关推荐
源猿人14 分钟前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾14 分钟前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工20 分钟前
vue3实现仿豆包模版式智能输入框
前端·vue.js
xw51 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 小时前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒2 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding2 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖2 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花3 小时前
i18n国际语言化配置
前端