Working with Size Fits

Learn the concept of Size Fits and its role in responsiveness.

Size Fits form the basis of Codelessly's auto-layout system. It's a fundamental concept that helps you achieve that pixel-perfect responsiveness.

To summarize, Size Fits let you define how a node fits inside a frame, row, or column. Whether it takes up all the available space or wraps around its children, taking the minimum space possible. Or, you can even provide it a fixed size manually.

Size Fits can be defined per axis, horizontal and vertical. Simply select the desired Size Fit from the dropdown, or, use the Size Fit Selector.

Fixed Size

By default, nodes are fixed in size. This means that they do not adjust their size according to the parent layout.

So, if a node is fixed size on the horizontal axis, it retains its width.

If a node is fixed size on the vertical axis, it retains its height.

Fill Parent

This fit expands the node to the size of its direct parent.

So, if a node is set to fill parent on the horizontal axis, it expands its width to that of its parent.

If a node is set to fill parent on the vertical axis, it expands its height to that of its parent.

Wrap Content

Contrary to fill parent, this fit depends on a node's children rather than its parent. If a node has children, wrap content sets the node's dimensions to that of its children.

So, if a node wraps content horizontally, its width shrinks to that of its children.

If a node wraps content vertically, its height shrinks to that of its children.