


















最近心痒难耐,准备入手一个主题的,最后也因为价格太高而放弃。
也幸亏是放弃了那个主题,因为林三现在也不喜欢了,避免了一场冲动消费。那是上周日的事情了,也刚好借着带妻儿出去玩耍的契机,调整了心态,重新思考了需求。
这个样式的优化,跟我以前遇到的不一样,但这次有豆包。通过和豆包的全力配合,修改 css 代码也达不到效果,我也能看出豆包是尽力了,但是隐约觉得豆包看到的东西并非全面,所以影响了他的判断。于是两个小时后,我尝试问豆包,这些个 css 不起作用的原因,有没有可能是上层父元素产生了影响?从而找到了问题的突破口。
这是我文章列表的标题部分的父元素代码:
.joe_list__item.default .information {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;}
在这段代码的最后加入一句样式 align-items: flex-start; 即可解决问题。
父容器 information 设置了 flex-direction: column(垂直排列):
align-items 默认值是 stretch,交叉轴(水平)方向子元素会被强制拉伸、填满父容器整宽,所以标题链接直接撑满一行,方块样式失效。align-items: flex-start 后:子元素不再拉伸宽度,宽度贴合自身内容(文字大小),恢复原本小方块尺寸。做个笔记,以后应该用得着~
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。