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 Inline, inline-block, block, none, and flex are different display values for HTML elements. In practical use with Acho App builder, flex is the most powerful and often used one.

• 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.

• 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.

• 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.

• 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.

• 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: row, row-reverse, column, and column-reverse.

• The default value is row, which means that the flex items are arranged left-to-right. row-reverse is the opposite.

• column and column-reverse work similarly, but they arrange the items in a top-to-bottom direction. column places the items from the top of the container to the bottom, while 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:

• flex-start (default): items are packed towards the start of the main axis.

• flex-end: items are packed towards the end of the main axis.

• center: items are centered along the main axis.

• space-between: items are evenly distributed along the main axis, with the first item at the start and the last item at the end.

• 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:

• flex-start: items are aligned at the start of the cross axis.

• flex-end: items are aligned at the end of the cross axis.

• center: items are centered along the cross axis.

• baseline: items are aligned such that their baselines align.

• 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.