Flexbox 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}.

Properties for the child items or flex items

In CSS Flexbox, properties set on the child elements, or flex items, can change their alignment, order, and size within the flex container.

The properties that you can change using our utility classes include:

• order
• flex-grow
• flex-shrink
• fill (Shorthand for flex-grow, flex-shrink and flex-basis combined)
• align-self

Order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. You can change the visual order of specific flex items via order utilities.

The value for the order properly can be 0-5.

Applying order

The order property of flex items can be set using the following classes:

• qld__order-{value} or qld__order-{breakpoint}-{value}
• qld__order-first or qld__order-{breakpoint}-first
• qld__order-last or qld__order-{breakpoint}-last

Items with the same order revert to source order.

Flex-grow

The flex-grow property in flexbox allows flex items to expand and fill any available extra space in their container.

Via our utility classes the flex-grow property can be set to the value of 0 or 1.

• Flex-grow-0: Setting flex-grow to 0 prevents the flex item from expanding beyond its initial size, regardless of available space.
• Flex-grow-1: Setting to flex-grow 1will expand the item to fill any extra space in the container. If all flex items have flex-grow set to 1, they will share the space equally.

Applying flex-grow:

The flex-grow property of flex items can be set using the following classes:

qld__flex-grow-{value} or qld__flex-grow-{breakpoint}-{value}.

Flex-shrink

The flex-shrink property in flexbox determines how flex items reduce their size when there isn't enough space available in their container.

In our utility classes, the flex-shrink property can be set to either 0 or 1.

• Flex-shrink-0: Setting flex-shrink to 0 prevents the flex item from shrinking, meaning it will maintain its initial size even if there is not enough space.
• Flex-shrink-1: Setting flex-shrink to 1 allows the item to shrink to prevent overflow of the container. If all flex items have flex-shrink set to 1, they will reduce in size equally to fit the container.

Applying flex-shrink

The flex-shrink property of flex items can be set using the following classes: qld__flex-shrink-{value} or qld__flex-shrink-{breakpoint}-{value}.

Flex-fill

Flex-fill is uses the flex property to combine  flex-grow, flex-shrink and flex-basis.  When Flex-fill is applied to sibling elements it forces them to best fill the space based on widths equal to their content.

The flex-fill behaviour is implemented by setting the flex property to  flex: 1 1 auto . This is shorthand for flex-grow being set to 1, flex-shrink being set to 1and flex-basis being set to auto.

Applying flex-fill

The flex-fill can be applied to flex items using the following classes:

qld__flex-fill or qld__flex-{breakpoint}-fill.

Align-self

Use align self classes on flexbox items to individually change their alignment on the cross axis. You can choose from start, end, center, baseline, or stretch (browser default) as alignment options.

Applying align-self

The align-self property of flex items can be set using the following classes:

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