Layout
The layout module is comprised of the following submodules:
Padding
Padding is the internal spacing inside an element that is around the content and before the border. Padding can be expressed in the following units: PX / VW / VH / EM / REM
There are 3 ways to control the padding: unified, pairs, custom
DDP layout padding sides selector
Margin
Margin is the space outside an element which pushes other objects.
Margins can be expressed in the following units: PX / VW / VH / EM / REM
There are 3 ways to control the padding: unified, pairs, custom
Display
Display module controls the layout logic of an object and the objects inside of it.
There are 6 options for display:
Display = Block
The element generates a full line and creates line breaks both before and after the element when in the normal flow.
Display = Flex
The element behaves like a block-level element and lays out its content according to the flexbox model.
Both Flex and inline flex have the following submodules:
‘direction’, ‘wrapping’, ‘align-items’, ‘justify-content’ and ‘gap’.
Direction
Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
Wrapping
Sets whether flex items are forced onto one line or can wrap onto multiple lines or columns, depending on the direction.
Align-items
Controls the alignment of items on the Cross Axis, depending on the direction selected.
There are 5 options for aligning:
Start - Aligns the flex items flush against the flex container's main-start or cross-start side.
Center - The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.
End - aligns the flex items flush against the flex container's main-end or cross-end side.
Stretch - If the items are smaller than the alignment container, auto-sized items will be equally enlarged to fill the container, respecting the items' width and height limits.
Baseline - All flex items are aligned such that their flex container baselines align.
Justify-content
Defines how the browser distributes space between and around content items along the main-axis of a flex container, depending on the direction selected.
There are 5 options for justifying content:
Start - the items are packed flush to each other toward the start edge of the alignment container in the main axis.
Center - the items are packed flush to each other toward the center of the alignment container along the main axis.
End - the items are packed flush to each other toward the end edge of the alignment container in the main axis.
Space between - the items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
Space around - The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
Gap
Sets the gaps (gutters) between rows and columns.
Display = Inline-block
The element generates a block box that allow surrounding content to be situated next to it if there is space. Inline-block allows to set a width and height on the element and top and bottom margins & paddings are respected (unlike in inline)
Display = Inline Flex
The element behaves like an inline-level element and lays out its content according to the flexbox model, and has the same options as Flex
Display = Inline
The element generates one inline box that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
Display = None
Turns off the display of an object so that it has no effect on layout (the document is rendered as though the object did not exist). All descendant objects will be treated as hidden as well.
The object cannot be accessed from the canvas and can only be accessed via the layers, which will have a special ‘eye’ indicator.
Last updated
