怎样做汽车网站建设,网站搜索引擎优化技术,网站建设方案的内容,wordpress 阿里云flex: 1 display:flex 导致的宽度失效问题
问题复现 有这样的一个业务场景#xff0c;详情项每行三项分别占33%宽度#xff0c;每项有label字数不固定所以宽度不固定#xff0c;还有content 占满标签剩余宽度#xff0c;文字过多显示省略号#xff0c; 鼠标划入展示…flex: 1 display:flex 导致的宽度失效问题
问题复现 有这样的一个业务场景详情项每行三项分别占33%宽度每项有label字数不固定所以宽度不固定还有content 占满标签剩余宽度文字过多显示省略号 鼠标划入展示全部title) 现有元素content, 其父元素parent设置了flex, 以下为content的css配置。
flex: 1;
/* display: flex; */
background: #eee;overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;如果 content 不开启flex 一切完美, 这其实是因为 min-width 变成了auto 这时只需要 改成0即可但是 content 内容是文字还是会宽度失效
解决
要实现超出隐藏可以在 content 再增加元素包含文字 元素宽度设置100%即可未设置min-width: 0的情况下content子元素宽度设置也是无效的样例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleFlex-wdith/titlestyle.parent {display: flex;width: 400px;height: 200px;border: 1px solid;}.content {background: #eee;height: 100%;flex: 1;display: flex;flex-wrap: wrap;min-width: 0; /* flex: 1 0 50%; */}.inner {width: 100%;display: flex;}.inner .inner1 {height: 50px;flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;background-color: #d0b3f4;}.inner2 {width: 100%;height: 50px;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;background-color: #ed8e8e;}.inner3 {width: 30%;height: 50px;white-space: nowrap;text-overflow: ellipsis;overflow-x: hidden;background-color: #dff4cb;}/style
/head
body!-- content设置了flex: 1时再设置 display: flex 会导致content宽度失效 因为min-width被设置为auto了需要设置width: 0这样宽度不会失效再在content增加子元素 width 100% 在做布局即可--div classparentdiv classlabel【我是个标签】/divdiv classcontentdiv classinnerdiv classinner1标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容/div/div div classinner2标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容/divdiv classinner3标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容标签内容/div/div/div
/body
/html如此便能在flex: 1的元素再开启弹性布局随心所欲了。
原因 问了下AI flex: 1的元素为啥设置了display: flex 后 min-width会变成auto大致也说明白了 默认行为当一个元素被设置为 display: flex 时它变成了一个弹性容器而其子元素成为了 flex 项目flex items。根据 CSS 规范flex 项目默认的 min-width 是 auto这意味着该元素的最小宽度取决于它的内容。如果内容宽度超过了 flex-basis 设定的初始宽度min-width: auto 会阻止元素缩小到比其内容更窄。 min-width: auto 的含义min-width: auto 的意思是元素的最小宽度会根据其内容自动调整。当父容器的空间变小时min-width: auto 允许内容的宽度决定元素最小能缩小到多少。对于文字或图片等内容min-width: auto 会确保元素不会缩小到将内容截断的地步。 与 flex: 1 的关系在设置 flex: 1 的情况下元素会尝试尽可能填充父容器的可用空间但 min-width: auto 可能会阻止该元素缩小到比其内容更小的宽度。如果你希望元素可以自由缩小到任意宽度即使小于内容宽度需要显式地将 min-width 设置为 0。
