# 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.acho.io/app-builder/app-construction/elements/css-styles/layout.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.