div固定大小文字溢出自动缩小_Figma新功能发布，看看什么是才是真正的自动布局...

最新推荐文章于 2024-08-25 19:56:43 发布

weixin_39805355

最新推荐文章于 2024-08-25 19:56:43 发布

阅读量779

点赞数

文章标签： div固定大小文字溢出自动缩小

由于公众号文章的推送规则已经改成了不按照发布时间排序，所以为了大家能够准时收到我们的文章推送，请记得猛戳右下角的「在看」，并点击文章右上角的“...”将72PX设为星标～这样就不会错过每一篇精彩的推送啦?

终于发布啦，新 AL 更强大也更加灵活。可以说，新版 Auto Layout 是在设计工具中实现了一个 CSS Flex[1] 可视化编辑器。视频来源：https://twitter.com/figmadesign/status/1329455521355730945下面，我给大家汇总一下这次更新带来的功能。 •独立的四个方向内边距 •更灵活的对齐方式 •元素 Rezing 和 Constraints

独立的四个方向内边距

之前的 Auto Layout 元素内边距只能分别定义水平和垂直方向上的，如果你想实现左边 10px 右边 2px 这种是不行的。但是现在四个方向的内边距都可以单独定义啦。点击右边的图标，就可以单独填写四个内边距啦，按 Tab 键还可以快速跳到下一个输入框。

独立内边距在外面的输入框中还可以输入逗号分隔的数字来快速定义四个方向的内边距，其顺序是按照上右下左顺时针走的，和 CSS padding[2] 简写一样。比如 8,10,8,10 就可以设置上下为 8px 左右为 10px 的内边距。

快速设置内边距

更灵活的对齐方式

伴随着独立内边距一起的，是对齐方式的更新。以前 Auto Layout 内元素的对齐方式是在内部元素身上控制的，现在所有的对齐控制都从父元素控制(不能使用方向键快速切换元素的对齐方式了)。在设置独立内边距的面板中间就是设置对齐方式的地方，这些图标含义很清晰，可以直接选取你需要的对齐方式。

设置对齐方式值得一提的是，我们还可以设置元素是抱在一团还是平均分布，如果抱团就是上图的效果，元素挤在一起，如果选择了 space between，元素会被自动分开，中间的间距是自动变化的，保持它们平均分布在一条线上。

元素抱团还是分开

元素 Rezing 和 Constraints

现在 Auto Layout 元素多了一个 Rezing 控制，主要用来控制元素尺寸变化行为。以前 Auto Layout 元素尺寸随着内部元素变化而变化，现在更灵活了，我们既可以靠内部元素撑开父元素，也可以让父元素控制内部。如下图，我们设置外部容器宽度固定，高度 Hug Content，也就是「适应内容」，那么当我们修改内部元素时它的宽度不会变，而高度会随着内部元素被撑高或缩小。

Rezing对于内部元素来说，我们除了可以设置「固定宽高」和「适应内容」，还可以设置填满整个容器。比如下图，我们想让左边头像固定大小，右边文字自动填满剩余空间，就可以设置它为 Fill Container。

fill container更厉害的是，现在的 Auto Layout 和 Constraints 可以结合使用啦。如果你把一个 Auto Layout 放在一个普通 Frame 内部，可以给它设置响应式约束，比如下图中让卡片左右跟随屏幕宽度变化拉伸，同时又可以保持自己的自动布局特性。

Rezing and Constraints总的来说，新的 Auto Layout 非常强大了，基本上各种效果都可以实现了，我们再也不用一层层嵌套了。如果你想了解更详细的内容，可以查看帮助文档和示例文件： • 帮助文档[3] • Auto Layout 使用说明[4] • Auto Layout 使用说明中文版[5] • 介绍博文[6]更详细的细节让我们看这个叫做超能铜草帽的男人录制的最新讲解视频吧。Bilibili 视频地址： https://www.bilibili.com/video/BV1Uv411r7iD

References

[1] CSS Flex: https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex [2] CSS padding: https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding [3] 帮助文档: https://help.figma.com/hc/en-us/articles/360040451373 [4] Auto Layout 使用说明: https://www.figma.com/community/file/784448220678228461 [5] Auto Layout 使用说明中文版: https://www.figma.com/community/file/911267393900607489 [6] 介绍博文: https://www.figma.com/blog/behind-the-feature-the-making-of-the-new-auto-layout/

粉丝福利，后台回复关键字领取资料? 回复「设计周刊」领取独家设计周刊资源回复「样机」领取海量高质量样机源文件回复「组件库 」领取30家全球大厂设计系统源文件回复「压缩」领取好用的作品集压缩工具友情提示：如资料链接无效，请添加微信好友反馈处理。