Parent utilities

Properties for the parent element or flex container

In CSS Flexbox, properties set on the parent element, or flex container, define the layout's structure and adjust the positioning of child elements, ensuring responsive designs across different screen size. The properties that apply to the parent are:

• display (See Enabling flex behaviours)
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content

Flex-direction set rows and columns

Setting the flex-direction utility class on a flexbox container will change the alignment of its child elements on the main axis (x-axis by default).

The flex-direction property in CSS can be set to several key values:

• Row (default): The flex items are laid out horizontally from left to right, unless the dir attribute or the direction CSS property is used to change the text direction.
• Row-reverse: The flex items are laid out horizontally but in reverse order (right to left).
• Column: The flex items are laid out vertically from top to bottom.
• Column-reverse: The flex items are laid out vertically but in reverse order (bottom to top).

Applying flex-direction

The flex-direction property for flex containers can be applied using the following classes:

• qld__flex-row or qld__flex-{breakpoint}-row
• qld__flex-column or qld__flex-{breakpoint}-column
• qld__flex-row-reverse or qld__flex-{breakpoint}-row-reverse
• qld__flex-column-reverse or qld__flex-{breakpoint}-column-reverse

Wrap

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with the flex-wrap property.

The flex-wrap property in CSS can be set to several key values:

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

Applying wrap

The flex-wrap property for flex containers can be applied using the following classes:

• qld__flex-nowrap and qld__flex-{breakpoint}-nowrap
• qld__lex-wrap and qld__flex-{breakpoint}-wrap
• qld__flex-wrap-reverse and qld__flex-{breakpoint}-wrap-reverse

Justify-content

This property is essential for controlling the spacing between and around items within a flex container.  Depending on the set direction ( flex-direction ), the main axis could be horizontal (default) or vertical.

The justify-content property can be set to several key values:

• Start (default): Aligns items to the start of the container. In a row layout, items are placed at the beginning of the main axis. In a column layout, items start at the top of the container.
• End: Aligns items to the end of the container. In a row layout, items are moved to the far end of the main axis. In a column layout, items are aligned to the bottom.
• Center: Centers items along the main axis. This setting is useful for aligning items when there is extra space in the container, placing them in the middle of the layout axis.
• Between (space-between): Distributes items evenly, with the first item at the start and the last item at the end of the main axis. This setting is ideal for creating equal spacing between items while adhering them to the edges of the container.
• Aaround (space-around): Similar to between but provides space around each item. This means that the items will have half-size spaces on either end compared to the spaces between items, creating the perception of consistent spacing around all items.

Applying justify-content

The justify-content property for flex containers can be applied using the following classes:

qld__justify-content-{alignment} or qld__justify-content-{breakpoint}-{alignment}

Align items

The align-items property in CSS Flexbox controls the alignment of flex items along the cross axis (perpendicular to the main axis), allowing for the vertical centering, stretching, or baseline alignment of children within a flex container.

The align-items property can be set to several key values:

• Stretch (default): stretch to fill the container (still respect min-width/max-width).
• Start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
• End: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
• Center: items are centered in the cross-axis.
• Baseline: items are aligned such as their baselines align.

Applying align-items

The align-items property for flex containers can be applied using the following classes:

qld__align-items-{alignment} or qld__align-items-{breakpoint}-{alignment} .

Align-content

Align content aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

The align-content property offers several values to control the distribution of space among lines within a container:

• normal (default): items are packed in their default position as if no value was set.
• flex-start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
• flex-end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
• center: items centered in the container
• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: items evenly distributed with equal space around each line
• space-evenly: items are evenly distributed with equal space around them
• stretch: lines stretch to take up the remaining space

Applying align-content

The align-content property for flex containers can be set applied the following classes:

qld__align-content-{alignment} and qld__align-content-{breakpoint}-{alignment}.