> 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 ![](/files/zj0nNBYLpNZYkTsqS9sb)`Inline`, ![](/files/B47uQKXjYzMExoyUjRmL)`inline-block`, ![](/files/KJgBoUjcIg9SVFTxaA0B)`block`, ![](/files/9OvVTsd4CAZZDDLiNrGs)`none`, and ![](/files/By52a3MIRVs8VO4sv0zt)`flex` are different display values for HTML elements. In practical use with Acho App builder, ![](/files/By52a3MIRVs8VO4sv0zt)`flex` is the most powerful and often used one. * ![](/files/zj0nNBYLpNZYkTsqS9sb)`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. * ![](/files/By52a3MIRVs8VO4sv0zt)`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. * ![](/files/KJgBoUjcIg9SVFTxaA0B)`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. * ![](/files/B47uQKXjYzMExoyUjRmL)`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. * ![](/files/9OvVTsd4CAZZDDLiNrGs)`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`: ![](/files/9DlVbbLKlqwBACBrE4KF)`row`, ![](/files/calk1451k4FfRwhelTtA)`row-reverse`, ![](/files/suOuM7ejI08X5VI86oMb)`column`, and ![](/files/ezZYtUGTWtjcnj765PBm)`column-reverse`. * The default value is ![](/files/9DlVbbLKlqwBACBrE4KF)`row`, which means that the flex items are arranged left-to-right. ![](/files/9DlVbbLKlqwBACBrE4KF)`row-reverse` is the opposite. * ![](/files/suOuM7ejI08X5VI86oMb)`column` and ![](/files/ezZYtUGTWtjcnj765PBm)`column-reverse` work similarly, but they arrange the items in a top-to-bottom direction. ![](/files/suOuM7ejI08X5VI86oMb)`column` places the items from the top of the container to the bottom, while ![](/files/ezZYtUGTWtjcnj765PBm)`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: * ![](/files/Mv8tiFx6R8Au0akBM3Q9)`flex-start` (default): items are packed towards the start of the main axis. * ![](/files/33FVnR6GrJ0XvGXcQ496)`flex-end`: items are packed towards the end of the main axis. * ![](/files/Sk1ITV5JGvQ5mXqLTwlF)`center`: items are centered along the main axis. * ![](/files/vsyGvsO8taMnxjGZ5MDE)`space-between`: items are evenly distributed along the main axis, with the first item at the start and the last item at the end. * ![](/files/nFsvBy2N5CYMYk54Wt6b)`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: * ![](/files/DGo3XzcjDgacUjne5Ibr)`flex-start`: items are aligned at the start of the cross axis. * ![](/files/HJZLpId25INJj0OKPcOO)`flex-end`: items are aligned at the end of the cross axis. * ![](/files/anXkH0PcgymnBQagnjNB)`center`: items are centered along the cross axis. * ![](/files/I6t6BCgnT5eAGBh2029U)`baseline`: items are aligned such that their baselines align. * ![](/files/qE1aRkwrQWbKUkBs1Oxt)`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.