1
Felldeadbird 126 天前
我盲猜是 UI 组件 没有预留 定义的 class ,然后改起来很吃力。
定义了 display:flex 后,父类设定总宽度或者高度,特定子类设定宽度或者高度,剩余的会自动根据布局放置元素直到达到父类设定的宽度高度上限。 |
2
tool2dx 126 天前
“有些作者会在组件的实现上用 float 或者绝对布局,让你吃瘪”
别想太多了,现在谁还用 float 布局哦。绝对布局的话,预设一个最小高度就可以了。 一般 flex 不会不生效,除非无法推断出内部 div 的真实高度。我有时候还觉得 flex 太灵活,以至于写完布局要跨平台挺难的,只能在前端用。 |
3
cyrbuzz 126 天前
最后一个元素 flex-grow:1 就可以撑满吧。
|
4
tomSoSleepy 126 天前
calc 计算?
|
5
abcbuzhiming OP @Felldeadbird 即使有预留 class ,改起来也挺吃力,因为往往套三四层,你得挨个搞下去
@tool2dx 哥们,我说的是组件本身,我是真的见到了,组件编译成 html 后,其中某一个,或者某几个 div ,居然是 float ,我也不知道组件的作者要这么设计。而且你们肯定前端很熟练,自然觉得好改,我这边后端出身的,对 css 没有那么了解,见到这种完全没办法。 @cyrbuzz 只要到达最后元素的路径上有任意一个 div 不是 flex ,你最后一个元素设置 flex-grow:1 不会有任何效果,我也不清楚,到底是不是因为中间路径上的某个 div 是被加持了什么怪异的属性。导致最后的 div 设置 flex-grow:1 无效 |
6
chnwillliu 126 天前 via Android
要看你是横向还是竖向,div 是 block level 默认占父容器的全宽度,完全不用一路 flex 下去。竖向就比较麻烦,除非组件特意做了会占满父容器的 100% height 的 css 定义,否则你确实要一层层 hack 样式。
|
7
crz 126 天前
组件再怎么考虑完善也是有预设场景的,不能满足需求的话可以尝试覆盖样式(不只是少量几个属性,可能需要多个元素多个样式),要么换一个或者自己写
用组件更麻烦的是 dom 结构不合适,再怎么改样式 dom 结构也不会变 |
8
chnwillliu 126 天前 via Android
本质原因是 CSS 布局中高度是由元素堆叠起来的,父容器依赖子元素的高度来得到自己的高度,而 height 100% 或者 min-height 100%不会传递。宽度或者说 inline 方向上就没这个问题。
|
9
abcbuzhiming OP @chnwillliu 对啊,我现在就是竖向问题解决不了
|
10
chnwillliu 126 天前
|