penpot/penpot-docs
1
0
Fork 0
mirror of https://github.com/penpot/penpot-docs.git synced 2024-07-06 05:41:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Resizing constraints

Browse Source
This commit is contained in:
andy 2021-07-16 11:00:26 +02:00 committed by Andrés Moya
parent 17a9d5185a
commit d44177a173
4 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/constraints-horizontal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
img/constraints-vertical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
img/constraints.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

32
user-guide/constraints/index.njk Normal file
View File

@ -0,0 +1,32 @@
---
title: 19· Resizing constraints
---
<h1 id="constraints">Resizing constraints</h1>
<p class="main-paragraph">Constraints allow you to decide how layers will behave when resizing its container.</p>
<h3 id="constraints-apply">Apply constraints</h3>
<p>Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.</p>
<p>To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.</p>
<p><img src="/img/constraints.gif" alt="constraints" /></p>
<p>Constraints are set to “Scale” by default, but you have other options.</p>
<h3 id="constraints-horizontal">Horizontal constraints</h3>
<ul>
<li><strong>Left</strong>: The object maintains its size and position relative to the left side of its parent container.</li>
<li><strong>Right</strong>: The object maintains its size and position relative to the right side of its parent container.</li>
<li><strong>Left & right</strong>: The object maintains its size and position relative to both horizontal sides of its parent container.</li>
<li><strong>Center</strong>: The object maintains its size and position relative to the horizontal center of its parent container.</li>
<li><strong>Scale</strong>: The object will horizontally resize proportionally to its parent container size.</li>
</ul>
<p><img src="/img/constraints-horizontal.png" alt="constraints" /></p>
<h3 id="constraints-horizontal">Vertical constraints</h3>
<ul>
<li><strong>Top</strong>: The object maintains its size and position relative to the top side of its parent container.</li>
<li><strong>Bottom</strong>: The object maintains its size and position relative to the bottom side of its parent container.</li>
<li><strong>Top & bottom</strong>: The object maintains its size and position relative to both vertical sides of its parent container.</li>
<li><strong>Center</strong>: The object maintains its size and position relative to the vertical center of its parent container.</li>
<li><strong>Scale</strong>: The object will vertically resize proportionally to its parent container size.</li>
</ul>
<p><img src="/img/constraints-vertical.png" alt="constraints" /></p>