Flexbox

Use Flexbox utilities to build one-dimensional layouts with predictable direction, alignment, wrapping and flexible sizing. They are ideal for navigation bars, toolbars, button groups, media objects, card footers and compact responsive sections.

Start with is-flex or is-inline-flex, then combine direction, alignment, wrapping, gap and sizing utilities as needed.

Quick reference

Class	Styles	Use case
`is-flex`	`display: flex;`	Create a block-level Flexbox container.
`is-inline-flex`	`display: inline-flex;`	Create an inline Flexbox container.
`flex-row`	`flex-direction: row;`	Place items horizontally.
`flex-col`	`flex-direction: column;`	Place items vertically.
`flex-wrap`	`flex-wrap: wrap;`	Allow items to move onto multiple lines.
`justify-content-between`	`justify-content: space-between;`	Distribute items across the main axis.
`align-items-center`	`align-items: center;`	Center items on the cross axis.
`place-center`	`align-items: center;` `justify-content: center;`	Center content on both axes.
`flex-1`	`flex: 1 1 0%;`	Create equal flexible items.
`flex-none`	`flex: none;`	Prevent automatic grow and shrink behavior.

Usage

Create a Flexbox container first, then apply direction, alignment, wrapping and sizing utilities.

<div class="is-flex align-items-center justify-content-between gap-3">
  <div>Content</div>
  <button class="button is-primary">Action</button>
</div>

Content

Action

For inline elements, use is-inline-flex.

<a href="#" class="is-inline-flex align-items-center gap-1">
  <span>View docs</span>
  <span aria-hidden="true">→</span>
</a>

View docs

Direction

Use direction utilities to control the main axis of the Flexbox layout.

<!-- Row (default) -->
<div class="is-flex flex-row gap-2">
  <div>Home</div>
  <div>About</div>
  <div>Contact</div>
</div>

<!-- Column -->
<div class="is-flex flex-col gap-2">
  <div>Profile</div>
  <div>Statistics</div>
  <div>Actions</div>
</div>

Home

About

Contact

Profile

Statistics

Actions

Class	Styles
`flex-row`	`flex-direction: row;`
`flex-col`	`flex-direction: column;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col-reverse`	`flex-direction: column-reverse;`

Wrapping

Use wrapping utilities when items should stay on one line or move onto additional lines when space is limited.

<div class="is-flex flex-wrap gap-2">
  <span class="badge">Design</span>
  <span class="badge">CSS</span>
  <span class="badge">JavaScript</span>
  <span class="badge">Runtime</span>
  <span class="badge">Utilities</span>
  <span class="badge">Components</span>
</div>

DesignCSSJavaScriptRuntimeUtilitiesComponents

Class	Styles
`flex-wrap`	`flex-wrap: wrap;`
`flex-nowrap`	`flex-wrap: nowrap;`
`wrap-reverse`	`flex-wrap: wrap-reverse;`

Main axis alignment

Use justify-content-* utilities to align or distribute items along the main axis.

<header class="is-flex align-items-center justify-content-between">
  <a href="/">Brand</a>

  <nav class="is-flex gap-3">
    <a href="/docs">Docs</a>
    <a href="/components">Components</a>
  </nav>
</header>

start

Item

center

Item

end

Brand

Docs

Components

Class	Styles
`justify-content-start`	`justify-content: flex-start;`
`justify-content-end`	`justify-content: flex-end;`
`justify-content-center`	`justify-content: center;`
`justify-content-between`	`justify-content: space-between;`
`justify-content-around`	`justify-content: space-around;`

Cross axis alignment

Use align-items-* utilities to align items along the cross axis.

<div class="is-flex align-items-center gap-2">
  <img src="/avatar.jpg" alt="" class="thumbnail-image is-xsmall">
  <span>Profile settings</span>
</div>

start

Item A

Item B

center

Item A

Item B

end

Item A

Item B

Class	Styles
`align-items-start`	`align-items: flex-start;`
`align-items-end`	`align-items: flex-end;`
`align-items-center`	`align-items: center;`
`align-items-baseline`	`align-items: baseline;`
`align-items-stretch`	`align-items: stretch;`

Centering content

Use place-center for the common pattern where content needs to be centered on both axes.

<div class="is-flex place-center" style="min-height: 200px;">
  <div>Centered content</div>
</div>

Centered content

Multi-line alignment

Use align-content-* utilities when a wrapping Flexbox container has multiple lines and extra cross-axis space.

<div class="is-flex flex-wrap align-content-start gap-2" style="height: 160px;">
  <div>Tag 1</div>
  <div>Tag 2</div>
  <div>Tag 3</div>
  <div>Tag 4</div>
</div>

startTag ATag BTag C

centerTag ATag BTag C

endTag ATag BTag C

Class	Styles
`align-content-start`	`align-content: flex-start;`
`align-content-end`	`align-content: flex-end;`
`align-content-center`	`align-content: center;`
`align-content-between`	`align-content: space-between;`
`align-content-around`	`align-content: space-around;`
`align-content-stretch`	`align-content: stretch;`

Item alignment

Use align-self-* utilities to override cross-axis alignment for a single flex item.

<div class="is-flex align-items-center gap-2">
  <div>Item A</div>
  <div class="align-self-start">Item B</div>
  <div>Item C</div>
</div>

Item A

align-self-start

Item C

align-self-end

Item E

Class	Styles
`align-self-auto`	`align-self: auto;`
`align-self-start`	`align-self: flex-start;`
`align-self-end`	`align-self: flex-end;`
`align-self-center`	`align-self: center;`
`align-self-stretch`	`align-self: stretch;`

Flexible sizing

Use sizing utilities to control how individual items grow, shrink or keep their natural size inside a flex container.

<div class="is-flex gap-3">
  <aside class="flex-none">Sidebar</aside>
  <main class="flex-1">Main content</main>
</div>

Sidebar

Main content — grows to fill remaining space

flex-1

Class	Styles	Use case
`flex-1`	`flex: 1 1 0%;`	Equal-width flexible items.
`flex-auto`	`flex: 1 1 auto;`	Flexible item based on its natural size.
`flex-none`	`flex: none;`	Keep the item from flexing automatically.
`flex-shrink-0`	`flex-shrink: 0;`	Prevent an item from shrinking.

Responsive flexbox

FrontAlign follows a mobile-first model. A class without a prefix applies immediately; a prefixed class applies from that breakpoint and above.

Prefix	Min width	Example
`sm:`	`576px`	`sm:flex-row`
`md:`	`768px`	`md:flex-row`
`lg:`	`1024px`	`lg:justify-content-between`
`xl:`	`1280px`	`xl:align-items-center`

<div class="is-flex flex-col md:flex-row align-items-start md:align-items-center gap-3">
  <div class="flex-1">Content</div>

  <div class="is-flex gap-2">
    <button class="button is-primary">Save</button>
    <button class="button is-light">Cancel</button>
  </div>
</div>

Content — stacks on mobile, sits beside buttons on md+

Save

Cancel

Responsive class reference

Base	Small	Medium	Large	Extra large
`flex-row`	`sm:flex-row`	`md:flex-row`	`lg:flex-row`	`xl:flex-row`
`flex-col`	`sm:flex-col`	`md:flex-col`	`lg:flex-col`	`xl:flex-col`
`flex-wrap`	`sm:flex-wrap`	`md:flex-wrap`	`lg:flex-wrap`	`xl:flex-wrap`
`justify-content-between`	`sm:justify-content-between`	`md:justify-content-between`	`lg:justify-content-between`	`xl:justify-content-between`
`align-items-center`	`sm:align-items-center`	`md:align-items-center`	`lg:align-items-center`	`xl:align-items-center`

Common patterns

Responsive navigation

<nav class="is-flex flex-col md:flex-row align-items-center justify-content-between gap-3">
  <a href="/" class="font-bold">FrontAlign</a>

  <div class="is-flex flex-col md:flex-row gap-2">
    <a href="/docs">Docs</a>
    <a href="/components">Components</a>
    <a href="/templates">Templates</a>
  </div>
</nav>

FrontAlign

DocsComponentsTemplates

Toolbar

<div class="is-flex align-items-center justify-content-between gap-2">
  <div class="is-flex align-items-center gap-2">
    <button class="button is-light">Filter</button>
    <button class="button is-light">Sort</button>
  </div>

  <button class="button is-primary">Create</button>
</div>

FilterSort

Create

Media object

<div class="is-flex align-items-start gap-3">
  <img src="/avatar.jpg" alt="" class="thumbnail-image">

  <div>
    <h4>Runtime layer</h4>
    <p>Interactive behavior is initialized through the FrontAlign JavaScript engine.</p>
  </div>
</div>

Runtime layerInteractive behavior is initialized through the FrontAlign JavaScript engine.

Split layout

<section class="is-flex flex-col lg:flex-row gap-4">
  <div class="flex-1">
    <h2>Build with utilities</h2>
    <p>Use Flexbox for component-level alignment and responsive flow.</p>
  </div>

  <div class="flex-1">
    <div class="card">Preview</div>
  </div>
</section>

Build with utilitiesUse Flexbox for component-level alignment and responsive flow.

Preview

Flexbox vs Grid

Use Flexbox when a layout flows primarily in one direction. Use Grid when rows and columns need to be controlled together.

Use Flexbox for	Use Grid for
Navigation bars	Card grids
Toolbars	Dashboard layouts
Button groups	Pricing sections
Media objects	Gallery layouts
Inline actions	Two-dimensional page sections

A common FrontAlign pattern is to use Grid for page structure and Flexbox for component structure.

Usage notes

Use is-flex or is-inline-flex before applying Flexbox utilities.
Use gap-* utilities for spacing between flex items.
Use flex-wrap when items should move onto multiple lines.
Use flex-1 for equal flexible columns.
Use flex-none or flex-shrink-0 when an item should keep its natural size.
Use place-center only on Flexbox containers.
Use Grid utilities when both rows and columns need to be controlled together.