zoukankan      html  css  js  c++  java
  • Figma 学习笔记 – Auto Layout

    用途

    Auto Layout 有点像 CSS 的 Grid, 它还带有 responsive 的概念.使用它以后可以替代掉不少 constraints 的写法.

    用法

    一个 parent 抱着多个 children

    设置横向或纵向 (只能一个方向)

     设置 children 之间的 gap 

    设置 parent 的 padding

     

    设置 children 的 alignment

    父元素的 Resizing

    父元素的 dimension 有 2 个选择, 

    Hug contents 表示依据子元素的内容决定 dimension 

    Fixed Width/Height 表示固定一个 dimension.

    子元素的 Resizing

    子元素的 dimension 也有 2 个选择

    Fill Container 就是尽可能和父元素一样大 

    Fixed Width/Height 就是固定一个 dimension 

    当 Parent Hug Contents 遇上 Child Fill Container

    显然这是一个不太逻辑的设置, Figma 会自动替换来规避这种不逻辑的操作

    但是有一种情况是被允许的

    这里有 3 个 Layer, ancestor, parent, child

    ancestor hug contents 

    parent fill container

    child fixed width

    这种情况下, 虽然 ancestor 的 hug contents 和 parent 的 fill container 本来是冲突的, 但有了 child 就成立了.

    它就会形成上面这种效果了.

    有 1 个点需要注意 : parent 必须也设置成 Auto Layout 哦

     

  • 相关阅读:
    汉诺塔IX
    N!
    卡片游戏
    vuejs 2—bind
    vuejs 1—基础
    困难的串 Kryptn Factor Uva129
    JavaScript13—JSON
    JavaScript练习—二级菜单
    JavaScript12—tools.js
    JavaScript11—定时器
  • 原文地址:https://www.cnblogs.com/keatkeat/p/15369654.html
Copyright © 2011-2022 走看看