Flexboxes

Comprehensive utility classes for creating flexible layouts. Foundation CSS provides extensive flexbox utilities to build responsive, adaptable interfaces without custom CSS.

Basic Flex Layout

A flex layout is initiated with the .d-flex class. By default, display: flex; creates a non-wrapping row. Use .fd-column to create a column layout.

Basic Examples

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

<div class="d-flex fd-column">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Flex Direction

Control the direction of flex items using direction classes.

Class CSS Responsive?
.fd-row flex-direction: row; Y
.fd-row-reverse flex-direction: row-reverse; Y
.fd-column flex-direction: column; Y
.fd-column-reverse flex-direction: column-reverse; Y

Flex Direction Examples

.fd-row

1
2
3

.fd-row-reverse

1
2
3

.fd-column

1
2
3

.fd-column-reverse

1
2
3

Flex Wrap

Control how flex items wrap when they exceed the container width.

Class CSS Responsive?
.fw-wrap flex-wrap: wrap; Y
.fw-wrap-reverse flex-wrap: wrap-reverse; Y
.fw-nowrap flex-wrap: nowrap; Y

Flex Wrap Examples

.fw-wrap

Item 1
Item 2
Item 3
Item 4

.fw-nowrap

Item 1
Item 2
Item 3
Item 4

Flex Flow

Combined flex-direction and flex-wrap properties for shorthand control.

Class CSS Responsive?
.ff-row-wrap flex-flow: row wrap; N
.ff-row-nowrap flex-flow: row nowrap; N
.ff-row-reverse-wrap flex-flow: row-reverse wrap; N
.ff-row-reverse-nowrap flex-flow: row-reverse nowrap; N
.ff-column-wrap flex-flow: column wrap; N
.ff-column-nowrap flex-flow: column nowrap; N
.ff-column-reverse-wrap flex-flow: column-reverse wrap; N
.ff-column-reverse-nowrap flex-flow: column-reverse nowrap; N

Justify Content

Control the alignment of flex items along the main axis (horizontal in row, vertical in column).

Class CSS Responsive?
.jc-center justify-content: center; Y
.jc-end justify-content: flex-end; Y
.jc-space-around justify-content: space-around; Y
.jc-space-between justify-content: space-between; Y
.jc-space-evenly justify-content: space-evenly; Y
.jc-start justify-content: flex-start; Y

Justify Content Examples

.jc-center

Item 1
Item 2

.jc-space-between

Item 1
Item 2
Item 3

.jc-space-around

Item 1
Item 2
Item 3

Align Items

Control the alignment of flex items along the cross axis (vertical in row, horizontal in column).

Class CSS Responsive?
.ai-baseline align-items: baseline; Y
.ai-center align-items: center; Y
.ai-end align-items: flex-end; Y
.ai-start align-items: flex-start; Y
.ai-stretch align-items: stretch; Y

Align Items Examples

.ai-center

Item 1
Item 2
Item 3

.ai-stretch

Item 1
Item 2
Item 3

Align Content

Control the alignment of wrapped flex lines when there's extra space in the cross axis.

Class CSS Responsive?
.ac-center align-content: center; Y
.ac-end align-content: flex-end; Y
.ac-space-around align-content: space-around; Y
.ac-space-between align-content: space-between; Y
.ac-start align-content: flex-start; Y
.ac-stretch align-content: stretch; Y

Align Self

Override the align-items value for individual flex items.

Class CSS Responsive?
.as-auto align-self: auto; Y
.as-baseline align-self: baseline; Y
.as-center align-self: center; Y
.as-end align-self: flex-end; Y
.as-start align-self: flex-start; Y
.as-stretch align-self: stretch; Y

Align Self Examples

Default
.as-center
.as-end
.as-stretch

Flex Grow & Shrink

Control how flex items grow and shrink within a flex container.

Flex Classes

Class CSS Responsive?
.fl0 flex: 0 auto; Y
.fl1 flex: 1 auto; Y
.fl2 flex: 2 auto; Y
.fl3 flex: 3 auto; Y
.fl4 flex: 4 auto; Y
.fl5 flex: 5 auto; Y
.fl-none flex: none; Y
.fl-equal flex: 1 1 0; Y

Flex Grow Classes

Class CSS Responsive?
.fl-grow0 flex-grow: 0; Y
.fl-grow1 flex-grow: 1; Y
.fl-grow2 flex-grow: 2; Y
.fl-grow3 flex-grow: 3; Y
.fl-grow4 flex-grow: 4; Y
.fl-grow5 flex-grow: 5; Y

Flex Shrink Classes

Class CSS Responsive?
.fl-shrink0 flex-shrink: 0; Y
.fl-shrink1 flex-shrink: 1; Y
.fl-shrink2 flex-shrink: 2; Y
.fl-shrink3 flex-shrink: 3; Y
.fl-shrink4 flex-shrink: 4; Y
.fl-shrink5 flex-shrink: 5; Y

Flex Examples

.fl1 (grows to fill space)

Fixed
Flexible
Fixed

.fl-equal (equal sizes)

Equal
Equal
Equal

Order

Control the order of flex items without changing the HTML structure.

Class CSS Responsive?
.order-first order: -1; Y
.order-last order: 1; Y

Order Examples

Default order

Item 1
Item 2
Item 3

With .order-first

Item 1
Item 2
Item 3 (.order-first)

With .order-last

Item 1 (.order-last)
Item 2
Item 3

Usage Examples

Card Layout with Flexbox

<div class="d-flex fd-column g4">
  <div class="bg-white bs-md bar-lg p6">
    <h3 class="fs-h3 fw-bold mb3">Card Title</h3>
    <p class="fc-light-700 mb4 fl1">Card content that grows.</p>
    <div class="d-flex jc-space-between ai-center">
      <span class="fs-pica fc-light-500">Footer</span>
      <button class="btn btn--primary">Action</button>
    </div>
  </div>
</div>

Responsive Navigation

<nav class="d-flex fd-column sm:fd-row ai-center jc-space-between p4">
  <div class="logo">Brand</div>
  <div class="d-flex fd-column sm:fd-row g2">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

Centered Content

<div class="d-flex jc-center ai-center" style="height: 400px;">
  <div class="bg-white p6 bar-lg bs-md">
    <h2 class="fs-h2 fw-bold mb4 ta-center">Centered Content</h2>
    <p class="ta-center">This content is perfectly centered.</p>
  </div>
</div>

Button Group

<div class="d-flex g2">
  <button class="btn btn--secondary fl1">Cancel</button>
  <button class="btn btn--primary fl1">Save</button>
</div>

Responsive Sidebar Layout

<div class="d-flex fd-column lg:fd-row g4">
  <aside class="ws3 lg:ws3">
    <!-- Sidebar content -->
  </aside>
  <main class="fl1">
    <!-- Main content that grows -->
  </main>
</div>

Best Practices

✅ Do

  • • Use flexbox for one-dimensional layouts (row or column)
  • • Combine with gap classes for consistent spacing
  • • Use responsive flex direction for mobile-first design
  • • Leverage flex-grow for flexible content areas
  • • Use justify-content and align-items for precise positioning
  • • Consider using order for responsive reordering

❌ Don't

  • • Use flexbox when CSS Grid is more appropriate
  • • Overuse flex-grow without considering content needs
  • • Ignore responsive considerations for flex direction
  • • Mix flexbox with float or absolute positioning unnecessarily
  • • Forget about accessibility when reordering content
  • • Use complex flex properties when simple ones suffice

When to Use Flexbox vs Grid

Use Flexbox for:

  • • Navigation bars and menus
  • • Button groups and form controls
  • • Card layouts with flexible content
  • • Centering content (horizontal and vertical)
  • • One-dimensional layouts (either row or column)

Use CSS Grid for:

  • • Two-dimensional layouts (rows and columns)
  • • Complex page layouts
  • • Image galleries and card grids
  • • When you need precise control over item placement

Conditional Classes

Many flexbox classes support responsive breakpoints and state modifiers:

Responsive Examples

<!-- Responsive flex direction -->
<div class="d-flex fd-column sm:fd-row g4">
  <!-- Column on mobile, row on tablet and up -->
</div>

<!-- Responsive justify content -->
<nav class="d-flex jc-center sm:jc-space-between">
  <!-- Centered on mobile, space-between on tablet and up -->
</nav>

State Modifiers

<!-- Hover effects -->
<button class="d-flex ai-center jc-center p3 h:p4 t">
  <!-- Padding increases on hover -->
</button>

<!-- Focus states -->
<div class="d-flex f:fd-column">
  <!-- Changes to column direction on focus -->
</div>