Stack自动布局:Sketch中的Flexbox
Skacks会彻底改变你对Sketch布局方式的理解。
![](http://imgs.xueui.cn/wp-content/uploads/2017/02/201702261488143390.gif)
就像CSS中的Flex Box、iOS中的UIStackView和Android中的FlexboxLayout——Stack的自动布局可以再次改变整个局面。
Sketch用户终于可以在不用CSS的情况下,直接使用Flexbox的排版技术。
我们相信,推动设计生态前进的关键在于,创造出强大的设计概念。
Flexbox已经彻底改变了局面,它出现已有好几年了。但要使用它,你得在浏览器中使用CSS来设计,因此对于多数设计师可望不可及。
Stack是另一种形式的Flexbox,它更直观,但能力丝毫不减。它能使设计师以列、行、网格的思维来思考设计——使设计更加一致。
Stack是什么?
Stack是一种特殊的组,定义了其内部图层的布局方式。
![](http://imgs.xueui.cn/wp-content/uploads/2017/02/201702261488143392.png)
Stack组的图标是一种特殊的蓝色,上面还有图标来表示方向。
![](http://imgs.xueui.cn/wp-content/uploads/2017/02/2017022614881433921.png)
要使图层变为Stack模式,在Auto-Layout面板中点击Stack按钮。
小提示:
– Stacks能产生一致性。
– 一致性使设计清晰。
– Stacks能使设计清晰。
一个Stack组有3个属性:
- 方向:定义其内部图层按照水平还是垂直方式排列。
方向 - 对齐:包括顶对齐、中央对齐、底对齐、伸展。
对齐 - 间距:定义其中每个元素的间距。
Stack可以嵌套使用!
![](http://imgs.xueui.cn/wp-content/uploads/2017/02/201702261488143397.gif)
来解这道题!
90%的设计师第一次都会理解错!
下图由多少个Stack组构成:
![](http://imgs.xueui.cn/wp-content/uploads/2017/02/201702261488143398.png)
正确答案是:3。
![](http://imgs.xueui.cn/wp-content/uploads/2017/02/201702261488143399.png)
Stack组的图标是一种特殊的蓝色,上面还有图标来表示方向。
- 最里层横向排列的红色线框Stack组,其中有2个元素:星星和评论数。
- 中间层纵向排列的蓝色线框Stack组,其中有4个元素:应用名称、作者、分类、红色Stack组。
- 最外层横向排列的绿色线框Stack组,其中有2个元素:应用图标和蓝色Stack组。
Stack的实用诀窍:
- Stack很适合用于定义同级图层间的排列规则。
- 在Stack组里增加或删除元素,会重新排列其中图层。
- 文字图层的伸展会移动相邻图层。
- 拖拽可以轻松地重新排列子图层。
使用Stack实现Flex网格
Alan Roy,我们产品内测小组的一位多产的成员,用Stack创造出了Flex网格系统。
2020-11-17