为什么现代前端 UI 布局的语法，会和设计稿如此脱节？

[3dwelcome]

拿到设计同学的 UI 设计稿后，有个手机界面自适应的需求。

自适应这个在设计软件里超简单，有设定左右约束或者上下约束按钮，点两下就完事了。

可转换到 CSS 代码里，就变成了异常复杂的事情。先不说 div position/float 定位老布局有陈旧性，连新 flex 布局也不能很好适配复杂嵌套的设计稿。

于是，CSS 里能跟着父级 div 缩放或定位的控件，最终就全变成了 width:calc(100% - 62px)这种很奇怪的方式。

---

CSS 规范里，为什么不学设计软件，加个父级约束属性呢？加入上下左右约束关键字(constraint)，就自动能适配几乎 90%的设计稿件！

有人会说，可以用绝对定位啊。现在都 2021 年了，绝对定位早就不是网页设计的主流，不可能反其道而行之吧。况且所谓的 CSS 约束关键字，也仅仅在页面父级 div 大小改变时，才会生效。换句话说，平时约束属性是没任何存在感的，可以不用破坏原有的页面布局，能和 Flex/Grid 融合，简直完美。

[meteor957]

确实，calc 很难摆脱，并且 calc 很难维护

[Mutoo]

绝对定位虽然不是主流，但肯定是很重要的布局工具。而且绝对定位本身就是一种约束，非常适合这个应用场景，并不会因为今年是哪一年而被弃用。没必要反其道而行之。

[charlie21]

约束的底层实现 ... 大概就是 width:calc(100% - 62px) 这种运算

[vance123]

因为 css 是一帮学设计和排版的人搞的

[3dwelcome]

@charlie21 是的，但我就是觉得直接把底层运算公式暴露给 CSS 代码，让前端去维护，很不优雅。

理论上只需要给浏览器提供组件 x/y 和宽高，布局上的其余属性都是可以自动计算的。

CSS 都进化了那么多年，不能总是吃老本，不加新东西。现在加了约束，过几年大家就可以用上。

网页的灵魂在于设计稿，是艺术层面的。可惜现在设计归设计，代码归代码。

[IvanLi127]

我觉得问题出在 ui 上，web 的自适应挺好的。要套那么多层，就应该让 ui 返工优化下结构

[billlee]

不懂就问，width:calc(100% - 62px) 这个，不能写成在父元素上加 padding 吗？

[3dwelcome]

@Mutoo 绝对定位挺尴尬的，你用主流的 Flex 布局，可以一层套一层。而绝对定位和 Flex 布局是相互对立的，有点脱离整体瀑布流的感觉。

我理想中的前端好布局，是设计图转换后的 Flex+margin 偏移和对齐，看了代码后，也能猜个大概。比如很流行的 tailwind-css，就是以代码简洁著称。

这点 Flex 布局可以做到，可一大堆 magic number 的绝对定位只看代码，基本没办法还原出结构。日后没有设计图，维护布局异常艰难。

[zbinlin]

你的设计稿的嵌套有多复杂，截个图看下

[3dwelcome]

@zbinlin

类似这种，Photoshop 里一些层级可能会异常多，在设计界俗称"千层饼"。

如果按照这种图片，来手写 CSS Flex 布局，不算太复杂，但是就和标题说的一样，前端 UI 语法和设计稿脱离。完全是用 CSS 来重描一次界面了。

[zbinlin]

按这个设计稿，期望的 CSS 布局应该是怎样的，可以写下类似 CSS 的伪代码吗？

[3dwelcome]

@zbinlin flex 通过 left-margin:auto 来控制右对齐之类的，手写 CSS 都是这个套路。

根据设计稿，半自动化生产代码主旨是，要尽可能和人手写的差不多。

你如果按照二楼生产绝对布局，那就脱离文档流了。父级 DIV 高度测量全部为 0，根本没办法实用。

[huacx]

个人感觉，安卓的原生页面布局 约束的设计是最简洁直观的，比 ios 好，css 这块应该说思路很不同，css 的思路大概类似报纸排版。个人感觉 css 这种属于历史遗产缝缝补补出来的东西，直接推倒重来的可以，而且 performance 可能更好。

[CoolSpring]

前不久 Container Queries 进 chrome://flags 了