Flex Layout System
A powerful flexbox utility system with intuitive classes for creating flexible layouts with minimal effort.
Overview
The flex system provides both mixins and utility classes to create flexible layouts. It includes support for:
- Flex container setup
- Direction control (row, column, and reverse variants)
- Main axis alignment (justify-content)
- Cross axis alignment (align-items)
- Flex wrapping behavior
- Flex child properties for sizing and ordering
- Responsive variants for all utilities
Basic Usage
Start by applying the .flex class to create a flex container, then add modifiers for direction and alignment:
Flex Container
Display Type
Create flex containers with these classes:
.flex- Creates a block-level flex container.flex-inline- Creates an inline-level flex container
Flex Direction
Control the direction of flex items:
| Class | Mixin | Properties |
|---|---|---|
.flex.row | @include row; | flex-direction: row; |
.flex.col | @include col; | flex-direction: column; |
.flex.row-reverse | @include row-reverse; | flex-direction: row-reverse; |
.flex.col-reverse | @include col-reverse; | flex-direction: column-reverse; |
Direction Examples
Flex Wrap
Control how flex items wrap:
| Class | Mixin | Properties |
|---|---|---|
.flex.wrap | @include wrap; | flex-wrap: wrap; |
.flex.nowrap | @include nowrap; | flex-wrap: nowrap; |
.flex.wrap-reverse | @include wrap-reverse; | flex-wrap: wrap-reverse; |
Wrap Examples
Main Axis Alignment (justify-content)
Control how flex items align along the main axis:
| Class | Mixin | Properties |
|---|---|---|
.flex.start | @include start; | justify-content: flex-start; |
.flex.end | @include end; | justify-content: flex-end; |
.flex.center | @include center; | justify-content: center; |
.flex.between | @include between; | justify-content: space-between; |
.flex.around | @include around; | justify-content: space-around; |
.flex.evenly | @include evenly; | justify-content: space-evenly; |
Main Axis Alignment Examples
Cross Axis Alignment (align-items)
Control how flex items align along the cross axis:
| Class | Mixin | Properties |
|---|---|---|
.flex.x-start | @include x-start; | align-items: flex-start; |
.flex.x-end | @include x-end; | align-items: flex-end; |
.flex.x-center | @include x-center; | align-items: center; |
.flex.x-stretch | @include x-stretch; | align-items: stretch; |
.flex.x-baseline | @include x-baseline; | align-items: baseline; |
Cross Axis Content Alignment
Control multiple lines of flex items with align-content:
| Class | Mixin | Properties |
|---|---|---|
.flex.x-content-start | @include x-content-start; | align-content: flex-start; |
.flex.x-content-end | @include x-content-end; | align-content: flex-end; |
.flex.x-content-center | @include x-content-center; | align-content: center; |
.flex.x-content-between | @include x-content-between; | align-content: space-between; |
.flex.x-content-around | @include x-content-around; | align-content: space-around; |
.flex.x-content-evenly | @include x-content-evenly; | align-content: space-evenly; |
.flex.x-content-stretch | @include x-content-stretch; | align-content: stretch; |
Cross Axis Alignment Examples
Content Alignment Example (with wrap)
Responsive Variants
All flex utilities support responsive variants using the @breakpoint suffix:
| Breakpoint | Example Class | Description |
|---|---|---|
| sm | .flex.col@sm | Column layout at small breakpoint and up |
| md | .flex.between@md | Space between at medium breakpoint and up |
| lg | .flex.x-center@lg | Center aligned cross axis at large breakpoint and up |
| xl | .flex.wrap@xl | Wrap at extra large breakpoint and up |
Responsive Flex Example
This example changes from:
- Column layout on mobile (default)
- Column layout on small screens
- Column layout on medium screens
- Row layout on large screens and up
Flex Child Properties
Width and Sizing
Control the width and sizing behavior of flex children:
| Class | Mixin | Properties |
|---|---|---|
.fill-1 to .fill-12 | @include fill(4); | flex: 0 0 33.33%; (for 4 columns of 12) |
.fill-auto | @include fill-auto; | flex: 1 1 auto; |
.fill-full | @include fill-full; | flex: 0 0 100%; |
.grow | @include grow; | flex: 1 1 0%; |
.no-grow | @include no-grow; | flex: none; |
.shrink | @include shrink; | flex-shrink: 1; |
.no-shrink | @include no-shrink; | flex-shrink: 0; |
.shrink-twice | @include shrink-twice; | flex-shrink: 2; |
Item Self Alignment
Control the alignment of individual flex items:
| Class | Mixin | Properties |
|---|---|---|
.self-auto | @include self-auto; | align-self: auto; |
.self-start | @include self-start; | align-self: flex-start; |
.self-end | @include self-end; | align-self: flex-end; |
.self-center | @include self-center; | align-self: center; |
.self-stretch | @include self-stretch; | align-self: stretch; |
.self-baseline | @include self-baseline; | align-self: baseline; |
Order
Control the order of flex items:
| Class | Properties |
|---|---|
.order-first | order: -1; |
.order-last | order: 9999; |
.order-none | order: 0; |
.order-1 to .order-12 | order: 1; to order: 12; |
Flex Child Examples
Common Layout Examples
Holy Grail Layout
A classic layout with header, footer, main content, and two sidebars:
Card Grid
A responsive card layout that adjusts based on screen size:
Available Mixins
For custom implementations, you can use these Sass mixins:
// Container mixins @include flex; @include flex-inline; // Direction mixins @include row; @include col; @include row-reverse; @include col-reverse; // Wrap mixins @include wrap; @include nowrap; @include wrap-reverse; // Justify content mixins @include start; @include end; @include center; @include between; @include around; @include evenly; // Align items mixins @include x-start; @include x-end; @include x-center; @include x-stretch; @include x-baseline; // Align content mixins @include x-content-start; @include x-content-end; @include x-content-center; @include x-content-between; @include x-content-around; @include x-content-evenly; // Child mixins @include grow; @include shrink; @include self-center;
Best Practices
Do
- Use flex for one-dimensional layouts (rows or columns)
- Leverage grow and shrink for responsive content
- Use flex child properties like self-alignment
- Use order utilities to change visual order without changing HTML structure
- Combine with width utilities for more control over layout
Avoid
- Using flex for complex two-dimensional layouts (use Grid instead)
- Overriding natural flexibility with too many fixed dimensions
- Relying heavily on flex-wrap for grid-like layouts
- Nesting flex containers excessively (consider Grid)
- Depending solely on order properties for critical content organization