北京
工程师职业生涯里，我拿到过数不清的规格说明、设计文档和Figma文件，要把想法变成现实。我参加过交接会、启动会、设计评审，各种场合都经历过。这些年我注意到一件事：设计师和开发者常常以为在聊同一件事，实际上脑子里运行的是两套根本不同的心智模型。两个工种之间的摩擦，正是从这里冒出来的。
画布思维与堆叠思维
设计师有一块画布，在空间里随意移动元素。他们可以把元素放在任何位置，挪来挪去，调整大小。这件事快、简单、有趣，给了设计师需要的创作自由。但浏览器不是这样工作的。浏览器把元素组织成堆叠结构，这些元素彼此有关系，会占据空间，位置会随着周围元素的变化而改变。
对工程师来说，一张设计稿只是某个特定屏幕尺寸下的快照。我们的工作通常是找出能产生这个结果的正确规则，再把它插值到不同尺寸上。一个在画布上自由摆放，一个在堆叠里寻找规则，这就是两套心智模型最核心的差别。
差距其实没有想象中大
有意思的是，这两套心智模型之间的鸿沟并没有看起来那么大。设计工具已经开始把开发者用来构建布局的许多概念交给设计师。Figma有一个“自动布局”选项，跟CSS Flexbox的思考方式非常接近。这帮助设计师和开发者找到共同词汇，协作也更顺畅。
如果你写过一段时间CSS，大概率知道Flexbox。它已经向开发者开放了十年。基本思路很简单：你有一个容器，里面装着若干子元素，你想描述这些子元素如何排列、如何使用可用空间。你不是告诉浏览器每个元素该放在哪里，而是描述它们之间的关系。
Flexbox与自动布局的对应关系
想象一个容器里有多个按钮。一旦你把这个容器设为flex容器，就可以让这些按钮并排排列、彼此留出间距、居中对齐。容器变宽，布局可以自适应。某个按钮因为标签变化而变大，其他按钮也能相应响应。
Figma里有非常相似的东西：自动布局。如果你以前用过自动布局，其实已经理解了Flexbox背后的许多概念。你有一个容器，决定子元素是水平排列还是垂直排列。你定义间距和对齐方式。你决定内容变化时容器如何表现，以及子元素如何使用可用空间。
就像Figma允许你嵌套自动布局框架一样，CSS也允许你嵌套flex容器。每个容器都可以有自己的布局规则：一个让子元素垂直排列，另一个水平排列，还有一个可能让某个子元素占满全部可用空间。设计师在画布上搭出的层级结构，和开发者在代码里写的嵌套关系，本质上是在描述同一种东西。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
