用途
Auto Layout 有點像 CSS 的 Flex, 它還帶有 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 哦