> For the complete documentation index, see [llms.txt](https://docs.acho.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acho.io/app-builder/app-construction/elements/css-styles/layout.md).

# Layout

## Display

`Display` is a property that specifies the type of layout a certain HTML element should have. The display property is a crucial aspect of web design, as it determines how an element is positioned and laid out on a web page. The value of the display property can be set to either ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FkAG9GJERCuvxkD2j5VYI%2FLayout_Display_inline.svg?alt=media\&token=8a2724a0-0803-4084-ae0f-487b109e2841)`Inline`, ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FH847XHUmTa6lxJ6iUYa2%2FLayout_Display_blockinline.svg?alt=media\&token=b02eb5a5-7741-4e4f-b126-c14ccac8b20d)`inline-block`, ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FDrUb86EbhQ3Op1nKyQnd%2FLayout_Display_block.svg?alt=media\&token=e16d90c1-0bd4-4213-a27a-bd4bf98737e4)`block`, ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FNSgAvNRXtLdnKd6bDnRh%2FLayout_Display_none.svg?alt=media\&token=f1939733-a285-4f21-8992-d90698300d3e)`none`, and ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FDIhqmb651JeiN8IWkgnq%2FLayout_Display_flex.svg?alt=media\&token=43710bbe-f1ff-40ed-8709-afdaebaac157)`flex` are different display values for HTML elements. In practical use with Acho App builder, ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FDIhqmb651JeiN8IWkgnq%2FLayout_Display_flex.svg?alt=media\&token=43710bbe-f1ff-40ed-8709-afdaebaac157)`flex` is the most powerful and often used one. 

* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FkAG9GJERCuvxkD2j5VYI%2FLayout_Display_inline.svg?alt=media\&token=8a2724a0-0803-4084-ae0f-487b109e2841)`Inline`  elements only occupy as much space as their content and do not cause a new line to start. Examples of inline elements include spans, links, and images. 
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FDIhqmb651JeiN8IWkgnq%2FLayout_Display_flex.svg?alt=media\&token=43710bbe-f1ff-40ed-8709-afdaebaac157)`Flex` elements define a flex container and allow direct children to be laid out in a flexible way, either in a row or a column. This display value is useful for creating responsive layouts that can adjust to different screen sizes and devices.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FDrUb86EbhQ3Op1nKyQnd%2FLayout_Display_block.svg?alt=media\&token=e16d90c1-0bd4-4213-a27a-bd4bf98737e4)`Block` elements occupy the full width of their parent container and create a new block formatting context. This means that they start on a new line and stack vertically, one after the other. Examples of block elements include headings, paragraphs, and divs.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FH847XHUmTa6lxJ6iUYa2%2FLayout_Display_blockinline.svg?alt=media\&token=b02eb5a5-7741-4e4f-b126-c14ccac8b20d)`Inline-block` elements are similar to inline elements, but they can have a specified width and height and can be treated as a block element for formatting purposes.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FNSgAvNRXtLdnKd6bDnRh%2FLayout_Display_none.svg?alt=media\&token=f1939733-a285-4f21-8992-d90698300d3e)`None` elements do not appear on the page and do not take up any space.

## Direction

The `Direction` property **only** works when the `display` property is set to `flex`.

The `Direction` property is used to establish the main-axis of a flex container and define the direction that the flex items are placed in the container. There are four possible values for `Direction`: ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Feqggl3rM2rY9IIUJmeDa%2FLayout_Direction_row.svg?alt=media\&token=1bfb93ef-148b-42a4-98a1-3c85e1090673)`row`, ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FXUKYyadEYJlEDWvEBsqi%2FLayout_Direction_rowreverse.svg?alt=media\&token=2d68221c-cf13-40b3-a65a-77dae5428353)`row-reverse`, ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F2571eHknDlZibYdiZDji%2FLayout_Direction_column.svg?alt=media\&token=0baab067-4463-4136-b7e4-20f02bb46c0a)`column`, and ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Fdi6aBq16OB4sZalPxH5v%2FLayout_Direction_columnreverse.svg?alt=media\&token=3f30f295-f7b6-4bd9-9cc3-d1f1cdf90c8a)`column-reverse`. 

* The default value is ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Feqggl3rM2rY9IIUJmeDa%2FLayout_Direction_row.svg?alt=media\&token=1bfb93ef-148b-42a4-98a1-3c85e1090673)`row`, which means that the flex items are arranged left-to-right. ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Feqggl3rM2rY9IIUJmeDa%2FLayout_Direction_row.svg?alt=media\&token=1bfb93ef-148b-42a4-98a1-3c85e1090673)`row-reverse` is the opposite.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F2571eHknDlZibYdiZDji%2FLayout_Direction_column.svg?alt=media\&token=0baab067-4463-4136-b7e4-20f02bb46c0a)`column` and ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Fdi6aBq16OB4sZalPxH5v%2FLayout_Direction_columnreverse.svg?alt=media\&token=3f30f295-f7b6-4bd9-9cc3-d1f1cdf90c8a)`column-reverse` work similarly, but they arrange the items in a top-to-bottom direction. ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F2571eHknDlZibYdiZDji%2FLayout_Direction_column.svg?alt=media\&token=0baab067-4463-4136-b7e4-20f02bb46c0a)`column` places the items from the top of the container to the bottom, while ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Fdi6aBq16OB4sZalPxH5v%2FLayout_Direction_columnreverse.svg?alt=media\&token=3f30f295-f7b6-4bd9-9cc3-d1f1cdf90c8a)`column-reverse` places the items from the bottom to the top.

## Justify

The `justify-content` property **only** works when the `display` property is set to `flex`. It is used to align the flex items along the main axis within a flex container. When only `display: flex` is set, `justify-content` becomes applicable. The property takes the following values: 

* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FUBcVStY1ndomVFr3fyfN%2FLayout_Justify_flexstart.svg?alt=media\&token=1dc6f6d3-f5cd-429f-aad4-d19075565f9c)`flex-start` (default): items are packed towards the start of the main axis.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FOir6NK4CDJ4v6MCwoJfS%2FLayout_Justify_flexend.svg?alt=media\&token=0808c5a1-7b0d-4c29-802a-506ededaa93f)`flex-end`: items are packed towards the end of the main axis.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Ft8QVus95BYjtXtJfP8GY%2FLayout_Justify_center.svg?alt=media\&token=c7278364-18ea-402d-b380-1b3b14900d57)`center`: items are centered along the main axis.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FHfqMtLfXqhCIwXlcfehq%2FLayout_Justify_spacebetween.svg?alt=media\&token=316c5ae9-f8cd-4bea-9c32-86cedcd86f1c)`space-between`: items are evenly distributed along the main axis, with the first item at the start and the last item at the end.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FWyfQfoMbb7VoyxrelFqA%2FLayout_Justify_spacearound.svg?alt=media\&token=bb1d24dd-d209-4142-b06a-5d14381741b6)`space-around`: items are evenly distributed along the main axis with equal space around them.

## Align

The `align-items` property **only** works when the `display` property is set to `flex`. It is used to align the flex items along the cross axis within a flex container. The values for `align-items` are: 

* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FtGqCvZMmJxrNdKoukA3b%2FLayout_Align_flexstart.svg?alt=media\&token=760e7765-0758-439e-a490-143e1c645273)`flex-start`: items are aligned at the start of the cross axis.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FS1ZdDS65Py5i7vkbGM9z%2FLayout_Align_flexend.svg?alt=media\&token=04167d2a-7224-41ec-9cdc-f70c78304024)`flex-end`: items are aligned at the end of the cross axis.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FY3Ujjg3PvOetFZf47tzA%2FLayout_Align_center.svg?alt=media\&token=0063f40e-1cac-4dc6-b785-825888664281)`center`: items are centered along the cross axis.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FzGQ7HXqoHIPcihh4PvjV%2FLayout_Align_baseline.svg?alt=media\&token=275121a3-1fee-44d0-b4fb-b57d608daf93)`baseline`: items are aligned such that their baselines align.
* ![](https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FK3W9Y23kUyQD6a9tDjRr%2FLayout_Align_stretch.svg?alt=media\&token=b09f663b-1d3d-4ef5-a0e6-043a4317eecf)`stretch` (default): items are stretched to fill the container along the cross axis.

## Flex wrap

The `flex-wrap` property is used to control how flex items are wrapped within a flex container.

The `flex-wrap` property has three possible values: `nowrap`, `wrap`, and `wrap-reverse`.

* `nowrap` (default): all flex items will be on one line.
* `wrap`: flex items will wrap onto multiple lines, from top to bottom.
* `wrap-reverse`: flex items will wrap onto multiple lines from bottom to top.

## Grow

`flex-grow` is used to control the proportion of available space inside a flex container that a flex item should take up. It accepts a unitless value and serves as a means to dictate how much a flex item should grow if necessary. By default, the value is 0, meaning the item will not grow.

If all items within a flex container have a `flex-grow` value of 1, the remaining space will be distributed equally among all the items. If one item has a value of 2, for example, it will take up twice as much space as the others.

## Shrink

The `flex-shrink` property determines a flex item's shrink rate in comparison to other items in the container when there's insufficient space. It accepts a unitless value, with a default of 1, meaning the higher the value, the more the item shrinks. 

## Column Gap

This property **only** works when the `display` property is set to `flex`. It sets the size of the gap between the columns in a grid container.

## Row Gap

This property **only** works when the `display` property is set to `flex`. It sets the size of the gap between the rows in a grid container.