Flexbox - ArchCSS

Flex direction

Control the main axis of a flex container. All classes support responsive prefixes.

.flex-row

.flex-col

<div class="flex flex-row">...</div>
<div class="flex flex-col">...</div>
<div class="flex flex-row-reverse">...</div>
<div class="flex flex-col-reverse">...</div>

Class	CSS
`.flex-row`	`flex-direction: row`
`.flex-col`	`flex-direction: column`
`.flex-row-reverse`	`flex-direction: row-reverse`
`.flex-col-reverse`	`flex-direction: column-reverse`

Flex wrap

Control whether flex items wrap onto multiple lines.

<div class="flex flex-wrap">...</div>
<div class="flex flex-nowrap">...</div>
<div class="flex flex-wrap-reverse">...</div>

Class	CSS
`.flex-wrap`	`flex-wrap: wrap`
`.flex-nowrap`	`flex-wrap: nowrap`
`.flex-wrap-reverse`	`flex-wrap: wrap-reverse`

Align items

Control how flex children align along the cross axis.

.items-end

<div class="flex items-start">...</div>
<div class="flex items-center">...</div>
<div class="flex items-end">...</div>
<div class="flex items-stretch">...</div>
<div class="flex items-baseline">...</div>

Class	CSS
`.items-start`	`align-items: flex-start`
`.items-end`	`align-items: flex-end`
`.items-center`	`align-items: center`
`.items-stretch`	`align-items: stretch`
`.items-baseline`	`align-items: baseline`

Justify content

Distribute space along the main axis.

.justify-between

.justify-center

<div class="flex justify-start">...</div>
<div class="flex justify-center">...</div>
<div class="flex justify-end">...</div>
<div class="flex justify-between">...</div>
<div class="flex justify-around">...</div>
<div class="flex justify-evenly">...</div>

Class	CSS
`.justify-start`	`justify-content: flex-start`
`.justify-end`	`justify-content: flex-end`
`.justify-center`	`justify-content: center`
`.justify-between`	`justify-content: space-between`
`.justify-around`	`justify-content: space-around`
`.justify-evenly`	`justify-content: space-evenly`
`.justify-stretch`	`justify-content: stretch`

Flex sizing

Control how a flex item grows and shrinks relative to its siblings. Values map to flex: grow shrink basis.

flex-1

flex-2 (twice as wide)

flex-1

<div class="flex">
  <div class="flex-1">Equal width</div>
  <div class="flex-2">Double width</div>
  <div class="flex-auto">Shrinks to content</div>
  <div class="flex-none">Does not grow or shrink</div>
</div>

Class	CSS
`.flex-1` – `.flex-12`	`flex: n n 0%`
`.flex-auto`	`flex: 1 1 auto`
`.flex-none`	`flex: none`
`.flex-span`	`display: flex; flex: 1` - fills remaining space

Align self

Override the cross-axis alignment for an individual flex child.

<div class="flex items-start">
  <div class="self-center">Centered individually</div>
  <div class="self-end">Pinned to end</div>
</div>

Class	CSS
`.self-start`	`align-self: flex-start`
`.self-end`	`align-self: flex-end`
`.self-center`	`align-self: center`
`.self-stretch`	`align-self: stretch`
`.self-baseline`	`align-self: baseline`

Flex grow & shrink

Toggle how an individual flex item grows or shrinks, independent of the flex-{n} shorthand.

flex-1

flex-grow-0

<div class="flex">
  <div class="flex-1">Grows to fill</div>
  <div class="flex-grow-0">Does not grow</div>
  <div class="flex-shrink-0">Never shrinks</div>
</div>

Class	CSS
`.flex-grow-0`	`flex-grow: 0`
`.flex-grow-1`	`flex-grow: 1`
`.flex-shrink-0`	`flex-shrink: 0`
`.flex-shrink-1`	`flex-shrink: 1`

Order

Reorder flex children with .item-{key}. Shortcuts .item-first and .item-last pin an item to each end.

<div class="flex">
  <div class="item-first">First</div>
  <div class="item-2">Second</div>
  <div class="item-3">Third</div>
  <div class="item-last">Last</div>
</div>

Numeric keys follow the flexItems config map (item-1 through item-12) and all order classes support responsive variants, e.g. md:item-2.

Justify items & self

.justify-items-* distributes items on the inline axis; .justify-self-* does the same for a single item. Both also apply to CSS grid.

<div class="flex justify-items-center">
  <div>One</div>
  <div>Two</div>
</div>
<div class="flex items-center">
  <div class="justify-self-end">Pushed right</div>
</div>

Class	CSS
`.justify-items-{key}`	`justify-items: {key}`
`.justify-self-{key}`	`justify-self: {key}`

Both accept the same keys as .justify-*: start, end, center, between, around, evenly, and stretch.

Flex row & col shortcut

.flex-row / .row is a responsive shorthand: items stack in a column on small screens, wrap from md, and display as a row from lg up. Children can use .col to auto-size.

<!-- Stacks on mobile, row on desktop -->
<div class="row">
  <div class="col">Column A</div>
  <div class="col">Column B</div>
</div>

Responsive variants. All flexbox utilities - direction, wrap, align, and justify - support breakpoint prefixes like md:flex-col, lg:justify-between, and sm:items-center.