這個教程會教你在 Sketch 3 中如何完美地對齊元素和分布元素。我會用最基本的例子來解釋每一個功能，其中一些一定會讓你吃驚的～

1.對齊一個元素到畫板

一開始我們講對齊最基本的用法。

先看看 Inspector 的上方：你將看到一些與對齊相關的按鈕?？坑疫叺牧鶄€按鈕（左對齊，垂直居中對齊，右對齊，靠上對齊，水平居中對齊，靠下對齊）是用來對齊選中的多個元素的。但是，當你只選擇一個元素的時候，它就會理所當然地和畫板對齊。下面是演示：

之前也提到了，當你選擇了多個元素時，你同樣可以用這幾個相同的按鈕來對齊它們。但如果我們想讓多個元素對齊到畫板又該怎么做呢？

2.對齊多個元素到畫板

你可以將多個元素編成一組（選中元素后 CMD+G），再來將它們與畫板對齊。

但編組再對齊，這個方法不一定總是適合你的情況。讓我告訴你另一個更靈活的辦法吧。

先選擇你想要對齊的元素們，按住 Alt 鍵之后你會發(fā)現 Inspector 中的按鍵變換了樣子。現在你就可以對齊多個元素到畫板，而毋需編組了。記住，你要對齊的元素們必須在畫板之內，否則這個選項就不可用了。

我選中三個元素來演示給你們看：

這個方法對元素組同樣有效；這就意味著你可以選擇多個元素組，再按住 Alt 鍵來將它們一起對齊到畫板。

3.對齊到特定的元素

另一種情況：我想要讓每個元素都對齊到某個特定的元素。你首先需要理解的是，默認情況下， Sketch 總是將所有元素對齊到最外端那個元素上。這個元素被稱為「關鍵元素」。

因此，當你將所有元素對齊到頂端時，最頂端的那個元素就會變看作「關鍵元素」。這是我對齊三個元素到右上方的例子（紅色的方塊就是我們的「關鍵元素」）：

如果我們能自己選擇「關鍵元素」該多好呀，是吧？技巧在這兒：將你想要當做「關鍵元素」的元素鎖定起來（選擇元素，按 Shift+CMD+L），之后再選擇其他所有元素。

在下面的例子中，藍色的方塊已經被鎖定了，所以它就是我們新的「關鍵元素」?，F在我們再次對齊元素們到右上方：

4.對齊向量點

小提示：當你在向量編輯模式下時，你同樣可以用對齊按鈕來對齊多個向量點。選擇元素，雙擊進入向量編輯模式，然后選擇所有你想要對齊的向量點。

5.分布元素

你會發(fā)現我還沒有提到左邊兩個對齊按鈕。它們是用來垂直分布元素和水平分布元素的。我們也可以很簡單地平均地分布它們。打比方說，我們選擇了一些元素，然后想要在水平方向上分布它們。我們可以用水平方向分布按鈕或者點擊 Arrange > Distribute > Horizontally 。

最左邊和最右邊的元素會待在原本的位置，中間的元素會平均分布在它們之間。使用垂直方向分布按鈕，你可以在垂直方向上做相同的操作。

6.按固定間距來分布元素

那如果我想元素之間都相隔20px呢？水平方向分布按鈕和垂直方向分布按鈕都幫不上忙了。

這種情況下，我們可以使用 Make Grid 工具（Arrange > Make Grid）來設定元素間垂直和水平的間距。一開始可能有點難懂，讓我給你展示另一個動畫釋例：

這里，我想按照20px的間距來分布這四個元素。我創(chuàng)建了一個一排四列的網格。然后我將每列間隔設為20px。如果我想在垂直方向上來分布這些元素，我就得創(chuàng)建一個四排（20px的間隔）一列的網格。

結語

希望你們喜歡這個教程，熟練 Sketch中的「分布」，「對齊」工具會節(jié)省你好多時間。

原作者：Armando Sotoca  翻譯者：Puddinnng

本教程為翻譯教程，原文地址為：

http://design./tutorials/mastering-alignment-and-distribution-in-sketch--cms-24075