tiny-flex

Flexbox layout for the modern web.

tiny-flex is a small web components library for building Flexbox layouts. 

<script type="module" src="https://unpkg.com/tiny-flex"></script>

<flex-container align-items="center" justify-content="space-around" gap="1rem" wrap="wrap">
  <flex-item>One</flex-item>
  <flex-item>Two</flex-item>
</flex-container>
Copy

Demo

Here are a few examples of what you can build with tiny-flex.

Grow items in a row

grow

Distribute available space between items with different grow values.

One Two Three 
<flex-container gap="1rem" wrap="wrap">
  <flex-item grow="1">One</flex-item>
  <flex-item grow="2">Two</flex-item>
  <flex-item grow="1">Three</flex-item>
</flex-container>
Copy

Stack items in a column

direction

Change the main axis with direction and align the stack with align-items.

Top Middle Bottom 
<flex-container direction="column" align-items="center" gap="0.75rem">
  <flex-item basis="4rem">Top</flex-item>
  <flex-item basis="4rem">Middle</flex-item>
  <flex-item basis="4rem">Bottom</flex-item>
</flex-container>
Copy

Space items across a row

justify-content

Distribute items along the main axis with justify-content.

Start Center End 
<flex-container align-items="center" justify-content="space-between" gap="1rem">
  <flex-item basis="4rem">Start</flex-item>
  <flex-item basis="4rem">Center</flex-item>
  <flex-item basis="4rem">End</flex-item>
</flex-container>
Copy

Place items on a diagonal

align-self

Override the container alignment for individual items with align-self.

One Two Three 
<flex-container align-items="flex-start" gap="1rem">
  <flex-item basis="5rem">One</flex-item>
  <flex-item basis="5rem" align-self="center">Two</flex-item>
  <flex-item basis="5rem" align-self="flex-end">Three</flex-item>
</flex-container>
Copy

Wrap items onto new lines

wrap

Let items continue on another line when the row runs out of space with wrap.

One Two Three Four Five Six 
<flex-container wrap="wrap" gap="1rem">
  <flex-item basis="7rem">One</flex-item>
  <flex-item basis="7rem">Two</flex-item>
  <flex-item basis="7rem">Three</flex-item>
  <flex-item basis="7rem">Four</flex-item>
  <flex-item basis="7rem">Five</flex-item>
  <flex-item basis="7rem">Six</flex-item>
</flex-container>
Copy

Change the visual order

order

Rearrange items visually with order while keeping their HTML in its original sequence.

One Two Three 
<flex-container align-items="center" justify-content="center" gap="1rem">
  <flex-item basis="5rem" order="3">One</flex-item>
  <flex-item basis="5rem" order="1">Two</flex-item>
  <flex-item basis="5rem" order="2">Three</flex-item>
</flex-container>
Copy

Remove the component from the layout

as-child removes the component from the layout and applies its Flexbox styles to the slotted child. This is useful when your layout contains more complex elements that should keep their own semantics. The name is inspired by Radix UI’s asChild composition pattern.

Use an existing element as the container

flex-container

The slotted element becomes the flex container. 

<flex-container
  as-child
  direction="row"
  align-items="center"
  justify-content="space-between"
  gap="1rem"
>
  <nav aria-label="Account navigation">
    <strong>Workspace</strong>
    <div>
      <a href="#attributes-heading">Overview</a>
      <a href="#attributes-heading">Settings</a>
    </div>
  </nav>
</flex-container>
Copy

Use an existing element as the item

flex-item

The slotted element becomes the flex item.

Changes saved Your workspace is up to date. 
<flex-container align-items="center" gap="1rem">
  <flex-item as-child basis="2.5rem">
    <span aria-hidden="true">!</span>
  </flex-item>
  <flex-item as-child grow="1" basis="12rem">
    <div>
      <strong>Changes saved</strong>
      <span>Your workspace is up to date.</span>
    </div>
  </flex-item>
  <flex-item as-child basis="auto">
    <button type="button">Dismiss</button>
  </flex-item>
</flex-container>
Copy

Install

Install tiny-flex with the package manager of your choice. 

npm install tiny-flex
Copy 
pnpm add tiny-flex
Copy 
yarn add tiny-flex
Copy

Import

tiny-flex is an ES module. Import the installed npm package from your application code, or load it directly in the browser with a module script.

Bundler import

Use this after installing tiny-flex in a bundler such as Vite or Webpack. 

import "tiny-flex";

// The custom elements are now available in your app.
Copy

Browser module script

Use this when loading tiny-flex directly in a browser from a CDN. 

<script type="module" src="https://unpkg.com/tiny-flex"></script>

<!-- The custom elements are now available in your page. -->
Copy

API

HTML attributes map to Flexbox properties.

flex-container

Use container attributes to define the axes, alignment, and spacing for its children.

inline
Uses inline-flex instead of flex.
direction
Sets the main axis, such as row or column.
align-items
Aligns children across the cross axis.
align-content
Aligns wrapped lines across the cross axis.
justify-content
Distributes children along the main axis.
wrap
Controls whether children wrap onto multiple lines.
flow
Sets direction and wrap together.
gap
Adds consistent space between children.
row-gap
Sets the space between rows.
column-gap
Sets the space between columns.
as-child
Removes the container wrapper from layout and applies its flex styles to the slotted element.

flex-item

Use item attributes to control how each child participates in its container.

flex · grow · shrink
Controls flexible sizing when space changes.
basis
Sets the initial size before free space is distributed.
order
Changes the visual order of an item.
align-self
Overrides the container’s alignment for one item.
as-child
Removes the item wrapper from layout and applies its flex styles to the slotted element.