Home
Utilities
Flex

Flex

Flexbox utilities help arrange a group of items in a single direction. A parent element with flexbox will position all of its direct child elements.

Flex

Flex arranges the direct children of an element horizontally.

You can override several defaults using custom properties.

Custom Property	Default Value	Description
`--flex-align`	center	Vertical alignment of flex items (align-items)
`--flex-gap`	10px	Space between flex items (gap)
`--flex-justify`	flex-start	Horizontal alignment of flex items (justify-content)
`--flex-wrap`	nowrap	Whether flex content should wrap

Example
A list of links arranged horizontally using flex. (Adding role="list" removes the default padding and list style.)

HTML

<ul class="lwj-flex" role="list">
  <li><a href="">Episodes</a></li>
  <li><a href="">Schedule</a></li>
  <li><a href="">Blog</a></li>
  <li><a href="">Newsletter</a></li>
  <li><a href="">Store</a></li>
</ul>

Space Between works exactly the same as Flex except --flex-justify is set to space-between. This allows you to place two items on opposite sides of a flex container, or divide available space equally among more than two items.

Example
Two buttons placed on opposite sides of a flex container using space between.

HTML

<div class="lwj-space-between">
  <button class="lwj-button-primary">Previous</button>
  <button class="lwj-button-primary">Next</button>
</div>

Flex Item

Flex Item makes an item take up all available horizontal space or, if applied to multiple elements in the same flex container, divides the space equally between those elements.

Example
Blocks of text in flex containers with flex item applied to each child (top row) and without (bottom row). (--flex-align: stretch is applied so that each box in a row is the same height regardless of content.)

Add user management to a Next.js site with React server components, server actions, and AuthKit.

Add audit logging and log streams to a Node Express app.

Add user management to a Next.js site with React server components, server actions, and AuthKit.

Add audit logging and log streams to a Node Express app.

HTML

<div class="lwj-flex" style="--flex-align: stretch">
  <div class="lwj-surface lwj-inset-square lwj-flex-item">
    <p>Add user management to a Next.js site with React server components, server actions, and AuthKit.</p>
  </div>
  <div class="lwj-surface lwj-inset-square lwj-flex-item">
    <p>Add audit logging and log streams to a Node Express app.</p>
  </div>
</div>
<div class="lwj-flex" style="--flex-align: stretch">
  <div class="lwj-surface lwj-inset-square">
    <p>Add user management to a Next.js site with React server components, server actions, and AuthKit.</p>
  </div>
  <div class="lwj-surface lwj-inset-square">
    <p>Add audit logging and log streams to a Node Express app.</p>
  </div>
</div>