Child utilities

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.

Vanilla example

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 1

Flex item 2

Flex item 3

<!-- Order # -->
<div class="qld__display-flex">
  <div class="qld__order-3">Flex item 1</div>
  <div class="qld__order-2">Flex item 2</div>
  <div class="qld__order-1">Flex item 3</div>
  <div class="qld__order-5">Flex item 4</div>
  <div class="qld__order-4">Flex item 5</div>
</div>

<!-- Order first and order last -->
<div class="qld__display-flex">
  <div class="qld__order-last">Flex item 1</div>
  <div>Flex item 2</div>
  <div class="qld__order-first">Flex item 3</div>
</div>

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

Vanilla example

Flex item 1

Flex item 2

Flex item 3

<!-- Flex grow -->
<div class="qld__display-flex">
  <div class="qld__flex-grow-1">Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

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

Vanilla example

Flex item 1 tries to take up the full width of parent

Flex item 2

<!-- Flex shrink -->
<div class="qld__display-flex">
  <div style="width:100%">Flex item 1 tries to take up the full width of parent</div>
  <div class="qld__flex-shrink-1">Flex item 2</div>
</div>

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.

Vanilla example

Flex item 1 with extra content

Flex item 2

Flex item 3

<!-- Flex fill -->
<div class="qld__display-flex">
  <div class="qld__flex-fill">Flex item 1 with extra content</div>
  <div class="qld__flex-fill">Flex item 2</div>
  <div class="qld__flex-fill">Flex item 3</div>
</div>

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

Note:that float, clear and vertical-align have no effect on a flex items.

Vanilla example

Flex item

Aligned item

Flex item

Aligned item

Flex item

Aligned item

Flex item

Aligned item

Flex item

Aligned item

Flex item

<!-- Align self start -->
<div class="qld__display-flex">
  <div>Flex item</div>
  <div class="qld__align-self-start">Aligned item</div>
  <div>Flex item</div>
</div>

<!-- Align self center -->
<div class="qld__display-flex">
  <div>Flex item</div>
  <div class="qld__align-self-center">Aligned item</div>
  <div>Flex item</div>
</div>

<!-- Align self end -->
<div class="qld__display-flex">
  <div>Flex item</div>
  <div class="qld__align-self-end">Flex item</div>
  <div>Flex item</div>
</div>

<!-- Align self baseline -->
<div class="qld__display-flex">
  <div>Flex item</div>
  <div class="qld__align-self-baseline">Aligned item</div>
  <div>Flex item</div>
</div>

<!-- Align self stretch -->
<div class="qld__display-flex">
  <div>Flex item</div>
  <div class="qld__align-self-stretch">Aligned item</div>
  <div>Flex item</div>
</div>

Last updated: April 2024

Back to top