Flex Recipes

Flex recipes are helper recipes for quickly establishing flexbox layouts in custom CSS. These recipes are available as utility expansions in the ACSS workflow.

Layout Recipes

?flex-row

Establishes a horizontal flex layout:

.my-container {
  ?flex-row;
}

Expands to:

.my-container {
  display: flex;
  flex-direction: row;
}

?flex-column

Establishes a vertical flex layout:

.my-container {
  ?flex-column;
}

Expands to:

.my-container {
  display: flex;
  flex-direction: column;
}

Centering Recipes

These recipes provide quick centering solutions using Flexbox.

?center-all

Centers content both horizontally and vertically:

.hero-content {
  ?center-all;
}

Expands to:

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

?center-left

Centers content vertically, aligned to the left:

.sidebar-content {
  ?center-left;
}

Expands to:

.sidebar-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}

?center-right

Centers content vertically, aligned to the right:

.action-buttons {
  ?center-right;
}

Expands to:

.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

?center-top

Centers content horizontally, aligned to the top:

.header-content {
  ?center-top;
}

Expands to:

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

?center-bottom

Centers content horizontally, aligned to the bottom:

.footer-content {
  ?center-bottom;
}

Expands to:

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
}

Grid Recipe

?flex-grid

Creates a flexbox-based grid layout with centered unbalanced items. See Flex Grids for full documentation.

.my-grid {
  ?flex-grid;
}

Provides locally scoped variables for customization:

Variable	Default	Description
--gap	var(--grid-gap, 1.5rem)	Gap between grid items
--columns	3	Number of columns
--stretch	0	Set to 1 to stretch unbalanced items

Changes From 3.x

In ACSS 4.0:

• Recipe syntax changed from @ to ? prefix.
• Flex recipes replace the removed flexbox utility classes (.flex--row, .flex--col, etc.).
• New centering recipes added: ?center-all, ?center-left, ?center-right, ?center-top, ?center-bottom.
• New ?flex-grid recipe replaces the deprecated flex-grid utility classes.