> For the complete documentation index, see [llms.txt](https://docs.codelessly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.codelessly.com/advanced-editor-usage/size-fits-settings.md).

# Size Fits Settings

Certainly, size fits are not limited to just the three basic modes as discussed in the [Working with Size Fits](/editor-basics/working-with-size-fits.md)section. You can further play with spacing, flex ratios and even define constraints.

## Spacing

In rows and columns, we often need to add some space in between the children. That's when we use **Spacers**.

You can add a spacer by hovering over a row's child in the *Spacing Section* and tapping the plus button.

> GIF: Adding a spacer in a row. (coming soon)

Or, if you want equal spacing between all the children, you can define it next to spacing section's header.

> GIF: Define spacing for all children. (coming soon)

Same goes for column.

## Alignment

Alignment is an important aspect of responsiveness, especially when the row/column is set to fill parent. Children can be aligned the following ways:

### Main Axis

1. **Start**: Children are placed at the start of their parent. On the main axis, start means left for rows and top for columns.
2. **Center**: Children are aligned centrally on the horizonal axis for rows and on the vertical axis for columns.
3. **End**: Children are placed at the end of their parent. On the main axis, end means right for rows and bottom for columns.
4. **Space Between**: Children spread across their parent with equal space between them. No space added to both ends of the row/column.
5. **Space Around**: Children spread across their parent with equal space between them. Half of that space is added to both ends of the row/column.
6. **Space Evenly**: Children spread across their parent with equal space between them. Same space is added to both ends of the row/column.

### Cross Axis

1. **Start**: Children are placed at the start of their parent. On the cross axis, start means top for rows and left for columns.
2. **Center**: Children are aligned centrally on the vertical axis for rows and on the horizontal axis for columns.
3. **End**: Children are placed at the end of their parent. On the cross axis, end means bottom for rows and right for columns.
4. **Stretch**: Children expand to take up the entire space on the vertical axis for rows and on the horizontal axis for columns.

### Changing Alignment

Changing alignment is simple. Just select the preferred alignment from the spacing section.

> GIF: Selecting a main axis alignment and a cross axis alignment for a row and children changing their positions visibly. (coming soon)

## Flex Ratios (Coming Soon)

Flex ratios help us define how much space a node takes with respect to the available space.