Tailwind CSS 13 🎨 Modern Flexbox Layouts (Direction, Wrap, Justify, Items, Self Alignment) - KandZ

Flexbox is the layout model that made one-dimensional alignment practical. Before flexbox, centering an element vertically required hacks with tables, absolute positioning, or negative margins. With flexbox, a container declares its direction and alignment, and the children distribute themselves accordingly. Tailwind wraps every flexbox property in a utility, so the CSS becomes a set of class names that read like the intent: flex, justify-between, items-center, gap-4.

The utilities fall into two groups: container properties that control the layout of all children, and item properties that control individual children. Direction and wrap determine the axis and whether children flow onto multiple lines. Justify-content distributes children along the main axis. Align-items controls their position along the cross axis. Align-self overrides align-items for a single child. Gap adds space between children without margin. Grow and shrink determine how children absorb or yield space. Order changes their visual sequence.

This chapter covers the container properties, the item properties, the interaction between them, the v4 alias changes that shortened flex-grow and flex-shrink, and the patterns for building common layouts like navbars, card grids, and centered content.

Key point: flex establishes a flex container; flex-row and flex-col set the direction. justify-* distributes along the main axis; items-* aligns along the cross axis. gap-* spaces children without margin. grow-* and shrink-* control how children absorb or yield space. In v4, flex-grow-* and flex-shrink-* are aliased to grow-* and shrink-*.

Why flexbox utilities exist

The alignment problem. Centering, spacing, and distributing elements along an axis are among the most common layout requirements. Flexbox solves them with a few properties, and Tailwind exposes those properties as utilities so the layout is expressed in the markup.

The direction problem. A navbar arranges items horizontally; a sidebar arranges them vertically. The same children, different direction. flex-row and flex-col switch between them, and responsive variants let the direction change at breakpoints.

The distribution problem. Space between items can be distributed in several ways: packed at the start, packed at the end, centered, pushed apart, or spaced evenly. Each produces a different visual rhythm. justify-* covers all of them.

The sizing problem. Some children should be fixed; others should grow to fill available space; others should shrink when space is tight. grow-*, shrink-*, and flex-basis control this behavior, and flex-1 is the shorthand for “grow and shrink equally.”

The wrapping problem. A row of items may not fit on one line. flex-wrap allows them to flow onto multiple lines, and gap controls the spacing both horizontally and vertically. Without wrap, items overflow; with wrap, the layout adapts.

a. Establishing a flex container

The flex utility sets display: flex. It is the starting point for any flex layout.

<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

The inline-flex variant sets display: inline-flex, making the container participate in inline flow while its children are laid out with flexbox.

<span class="inline-flex items-center gap-2">
  <svg>...</svg>
  <span>Label</span>
</span>

Without flex or inline-flex on the parent, the child utilities (justify-*, items-*, gap-*) have no effect, because they depend on the flex formatting context.

b. Flex direction

The flex-* direction utilities set flex-direction, which determines the main axis. The main axis is the direction along which children are laid out, and it is the axis that justify-* distributes along.

Utility	CSS	Layout
`flex-row`	`flex-direction: row`	Horizontal (default)
`flex-row-reverse`	`flex-direction: row-reverse`	Horizontal, reversed
`flex-col`	`flex-direction: column`	Vertical
`flex-col-reverse`	`flex-direction: column-reverse`	Vertical, reversed

<div class="flex flex-row">Horizontal items</div>
<div class="flex flex-col">Vertical items</div>
<div class="flex flex-row-reverse">Horizontal, reversed</div>

The reversed variants change the visual order of children without changing the DOM order. This matters for accessibility and for screen readers, which follow the DOM order, not the visual order. Use order-* utilities when the visual order should differ from the DOM order for a specific child.

Direction is often responsive. A layout that stacks vertically on mobile and lays out horizontally on desktop uses flex-col md:flex-row:

<div class="flex flex-col md:flex-row gap-4">
  <div>Sidebar</div>
  <div>Content</div>
</div>

c. Flex wrap

The flex-wrap utilities control whether children flow onto multiple lines when they do not fit on one.

Utility	CSS	Behavior
`flex-nowrap`	`flex-wrap: nowrap`	No wrapping (default)
`flex-wrap`	`flex-wrap: wrap`	Wrap onto multiple lines
`flex-wrap-reverse`	`flex-wrap: wrap-reverse`	Wrap in reverse direction

<div class="flex flex-wrap gap-4">
  <div class="w-32">Item</div>
  <div class="w-32">Item</div>
  <div class="w-32">Item</div>
  <div class="w-32">Item</div>
</div>

With flex-nowrap, children shrink to fit rather than wrapping. With flex-wrap, children maintain their size and flow onto the next line. The choice depends on whether the items should compress or reflow.

Wrapping introduces the cross axis as a second dimension for distribution. When children wrap onto multiple lines, align-content controls how the lines are distributed, and gap adds space both between items and between lines.

d. Justify content

The justify-* utilities distribute children along the main axis. They set justify-content.

Utility	CSS	Distribution
`justify-start`	`justify-content: flex-start`	Packed at start
`justify-end`	`justify-content: flex-end`	Packed at end
`justify-center`	`justify-content: center`	Centered
`justify-between`	`justify-content: space-between`	First at start, last at end, equal between
`justify-around`	`justify-content: space-around`	Equal space on each side of each item
`justify-evenly`	`justify-content: space-evenly`	Equal space around every item
`justify-stretch`	`justify-content: stretch`	Auto-sized items fill the axis

<div class="flex justify-between">
  <div>Left</div>
  <div>Center</div>
  <div>Right</div>
</div>

The difference between justify-around and justify-evenly is subtle but visible. With around, each item has equal space on each side, so the space between two items is double the space at the edges. With evenly, the space between items equals the space at the edges, producing a more uniform rhythm.

Tailwind v4 adds justify-center-safe and justify-end-safe, which fall back to the start alignment when there is not enough space. This prevents items from being cut off when the container is too small.

<div class="flex justify-center-safe">
  <div>Centered when space allows</div>
</div>

e. Align items

The items-* utilities align children along the cross axis. They set align-items.

Utility	CSS	Alignment
`items-start`	`align-items: flex-start`	Start of cross axis
`items-end`	`align-items: flex-end`	End of cross axis
`items-center`	`align-items: center`	Centered
`items-baseline`	`align-items: baseline`	Aligned to text baseline
`items-stretch`	`align-items: stretch`	Fill the cross axis (default)

<div class="flex items-center gap-4">
  <img src="avatar.jpg" class="h-12 w-12 rounded-full" />
  <div>Name and details</div>
</div>

The most common use of items-center is aligning an icon or avatar with adjacent text. Without it, the icon sits at the baseline of the text and looks misaligned.

items-stretch is the default, which is why a flex row with no height set makes all children the same height. This is useful for card rows where all cards should match the tallest one.

<div class="flex items-stretch gap-4">
  <div class="bg-white p-4">Card 1</div>
  <div class="bg-white p-4">Card 2 with more content</div>
</div>

items-baseline aligns text along the baseline, which is useful when children have different font sizes but should sit on the same line of text.

f. Align self

The self-* utilities override align-items for a single child. They set align-self.

Utility	CSS
`self-auto`	`align-self: auto`
`self-start`	`align-self: flex-start`
`self-end`	`align-self: flex-end`
`self-center`	`align-self: center`
`self-stretch`	`align-self: stretch`

<div class="flex items-center gap-4">
  <div>Centered</div>
  <div class="self-start">Top-aligned</div>
  <div class="self-end">Bottom-aligned</div>
</div>

self-* is used when most children should align one way but a specific child needs a different alignment. A common case is a card in a row of cards that should stretch while the others are centered, or an action button that should sit at the bottom of a column while the content is centered.

g. Gap

The gap-* utilities add space between children without margin. They set gap, row-gap, or column-gap.

Utility	CSS
`gap-4`	`gap: 1rem`
`gap-x-4`	`column-gap: 1rem`
`gap-y-4`	`row-gap: 1rem`

<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="flex flex-col gap-y-2">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Gap is preferred over margin for spacing flex children because it does not add space at the edges. With margins, the first and last children have outer margins that affect the container; with gap, the spacing is strictly between children.

In Tailwind v4, gap is also the recommended replacement for the space-x and space-y utilities, which relied on child selectors and did not work with wrapping .

h. Grow and shrink

The grow-* and shrink-* utilities control how children absorb or yield space. They set flex-grow and flex-shrink. In v4, the older flex-grow-* and flex-shrink-* names are aliased to the shorter forms .

Utility	CSS	Behavior
`grow`	`flex-grow: 1`	Grow to fill available space
`grow-0`	`flex-grow: 0`	Do not grow
`shrink`	`flex-shrink: 1`	Shrink when space is tight
`shrink-0`	`flex-shrink: 0`	Do not shrink

<div class="flex gap-4">
  <div class="grow">Fills available space</div>
  <div class="grow-0">Fixed width</div>
</div>

The flex-* utilities combine grow, shrink, and basis:

Utility	CSS	Effect
`flex-1`	`flex: 1 1 0%`	Grow and shrink equally
`flex-auto`	`flex: 1 1 auto`	Grow and shrink from content size
`flex-initial`	`flex: 0 1 auto`	Shrink, do not grow
`flex-none`	`flex: none`	No grow, no shrink

<div class="flex">
  <div class="flex-none">Fixed</div>
  <div class="flex-1">Equal share</div>
  <div class="flex-1">Equal share</div>
</div>

flex-1 is the most common: it makes children share the available space equally. flex-none prevents a child from growing or shrinking, which is used for fixed-size elements like icons or buttons.

A critical detail: a flex child that should shrink below its content width needs min-w-0. Without it, the child’s automatic minimum size is its content size, and truncation does not work.

<div class="flex gap-2">
  <div class="min-w-0 flex-1 truncate">Long text that should truncate</div>
  <button class="shrink-0">Action</button>
</div>

Complete Example Session

<!-- ============================================
PART 1: BASIC FLEX ROW
============================================ -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- ============================================
PART 2: RESPONSIVE DIRECTION
============================================ -->
<div class="flex flex-col md:flex-row gap-4">
  <aside class="md:w-64">Sidebar</aside>
  <main class="flex-1">Content</main>
</div>

<!-- ============================================
PART 3: JUSTIFY BETWEEN
============================================ -->
<nav class="flex justify-between items-center p-4">
  <div class="font-bold">Logo</div>
  <div class="flex gap-4">
    <a href="#">Home</a>
    <a href="#">About</a>
  </div>
</nav>

<!-- ============================================
PART 4: CENTERING CONTENT
============================================ -->
<div class="flex items-center justify-center min-h-screen">
  <div class="text-center">
    <h1>Centered Content</h1>
  </div>
</div>

<!-- ============================================
PART 5: CARD ROW WITH STRETCH
============================================ -->
<div class="flex items-stretch gap-4">
  <div class="flex-1 bg-white p-4 rounded shadow">Card 1</div>
  <div class="flex-1 bg-white p-4 rounded shadow">Card 2</div>
  <div class="flex-1 bg-white p-4 rounded shadow">Card 3</div>
</div>

<!-- ============================================
PART 6: SELF ALIGNMENT
============================================ -->
<div class="flex items-center gap-4 h-32 bg-gray-100">
  <div class="self-start">Top</div>
  <div>Centered</div>
  <div class="self-end">Bottom</div>
</div>

<!-- ============================================
PART 7: WRAPPING ITEMS
============================================ -->
<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 1</span>
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 2</span>
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 3</span>
  <span class="px-3 py-1 bg-blue-100 rounded-full">Tag 4</span>
</div>

<!-- ============================================
PART 8: GROW AND SHRINK
============================================ -->
<div class="flex gap-4">
  <div class="flex-none w-16">Icon</div>
  <div class="flex-1">Fills the rest</div>
  <button class="shrink-0">Action</button>
</div>

<!-- ============================================
PART 9: TRUNCATION IN FLEX
============================================ -->
<div class="flex gap-3 max-w-md">
  <div class="min-w-0 flex-1">
    <p class="truncate">A very long filename that must be truncated.txt</p>
  </div>
  <button class="shrink-0">Open</button>
</div>

<!-- ============================================
PART 10: COMPLETE NAVBAR
============================================ -->
<header class="flex items-center justify-between px-4 h-16 bg-white shadow-sm">
  <div class="flex items-center gap-2">
    <div class="size-8 bg-blue-500 rounded"></div>
    <span class="font-semibold">App</span>
  </div>
  <nav class="flex items-center gap-6">
    <a href="#" class="text-sm hover:text-blue-600">Dashboard</a>
    <a href="#" class="text-sm hover:text-blue-600">Settings</a>
  </nav>
  <div class="flex items-center gap-3">
    <button class="shrink-0">Sign out</button>
  </div>
</header>

These ten parts cover basic flex rows, responsive direction, justify between, centering, card rows with stretch, self alignment, wrapping, grow and shrink, truncation in flex, and a complete navbar.

Quick Reference

Container Utilities

Utility	CSS	Purpose
`flex`	`display: flex`	Establish flex container
`inline-flex`	`display: inline-flex`	Inline flex container
`flex-row`	`flex-direction: row`	Horizontal
`flex-col`	`flex-direction: column`	Vertical
`flex-row-reverse`	`flex-direction: row-reverse`	Horizontal reversed
`flex-wrap`	`flex-wrap: wrap`	Allow wrapping
`flex-nowrap`	`flex-wrap: nowrap`	No wrapping
`justify-*`	`justify-content`	Distribute main axis
`items-*`	`align-items`	Align cross axis
`gap-*`	`gap`	Space between children

Justify Content

Utility	CSS
`justify-start`	`flex-start`
`justify-end`	`flex-end`
`justify-center`	`center`
`justify-between`	`space-between`
`justify-around`	`space-around`
`justify-evenly`	`space-evenly`
`justify-stretch`	`stretch`

Align Items

Utility	CSS
`items-start`	`flex-start`
`items-end`	`flex-end`
`items-center`	`center`
`items-baseline`	`baseline`
`items-stretch`	`stretch`

Align Self

Utility	CSS
`self-auto`	`auto`
`self-start`	`flex-start`
`self-end`	`flex-end`
`self-center`	`center`
`self-stretch`	`stretch`

Grow and Shrink (v4)

Utility	CSS	Notes
`grow`	`flex-grow: 1`	v4 alias for `flex-grow`
`grow-0`	`flex-grow: 0`
`shrink`	`flex-shrink: 1`	v4 alias for `flex-shrink`
`shrink-0`	`flex-shrink: 0`
`flex-1`	`flex: 1 1 0%`	Grow and shrink equally
`flex-none`	`flex: none`	Fixed size

Best Practices

✅ Do This:

<!-- Direction changes at breakpoint -->
<div class="flex flex-col md:flex-row gap-4">

<!-- Center content with items-center -->
<div class="flex items-center gap-4">

<!-- Use gap instead of margins -->
<div class="flex gap-4">

<!-- min-w-0 for truncation in flex -->
<div class="min-w-0 flex-1 truncate">

<!-- shrink-0 for fixed items -->
<button class="shrink-0">Action</button>

❌ Don’t Do This:

<!-- Using margins for spacing -->
<div class="flex"><div class="mr-4">Item</div></div>  <!-- ❌ use gap -->

<!-- Forgetting min-w-0 -->
<div class="flex-1 truncate">Won't truncate</div>  <!-- ❌ -->

<!-- Using flex-grow-* in v4 -->
<div class="flex-grow">  <!-- ❌ use grow -->

<!-- justify-content without flex container -->
<div class="justify-center">  <!-- ❌ no flex parent -->

Common Pitfalls

Pitfall	Why It Happens	Fix
Justify has no effect	Parent is not `flex`	Add `flex` to parent
Truncation fails	Missing `min-w-0`	Add `min-w-0` to flex child
Items overflow	Missing `flex-wrap`	Add `flex-wrap`
Items shrink unexpectedly	Default `shrink: 1`	Add `shrink-0` to fixed items
Gap not applied	Parent is not flex	Add `flex` to parent
`flex-grow-*` not working	Using v3 name in v4	Use `grow-*`

Real-World Examples

1. Navbar

<nav class="flex items-center justify-between p-4">
  <div>Logo</div>
  <div class="flex gap-4">Links</div>
</nav>

2. Centered Hero

<div class="flex items-center justify-center min-h-screen">
  <h1>Hero</h1>
</div>

3. Card Row

<div class="flex items-stretch gap-4">
  <div class="flex-1">Card</div>
  <div class="flex-1">Card</div>
</div>

4. Sidebar Layout

<div class="flex">
  <aside class="w-64 shrink-0">Sidebar</aside>
  <main class="flex-1">Content</main>
</div>

5. Tag Cloud

<div class="flex flex-wrap gap-2">
  <span class="px-2 py-1 rounded">Tag</span>
</div>

6. Icon and Text

<div class="flex items-center gap-2">
  <svg class="size-4">...</svg>
  <span>Label</span>
</div>

7. Responsive Stack

<div class="flex flex-col sm:flex-row gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

8. Truncated with Action

<div class="flex gap-2">
  <span class="min-w-0 flex-1 truncate">Long name</span>
  <button class="shrink-0">Edit</button>
</div>

9. Space Between

<div class="flex justify-between">
  <span>Label</span>
  <span>Value</span>
</div>

10. Self-Aligned Card

<div class="flex items-center gap-4">
  <div>Centered</div>
  <div class="self-start">Top</div>
</div>

Visual

Flex Container and Axes

┌──────────────────────────────────────────────────────────────┐
│  flex-row (default):                                         │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  ┌────┐  ┌────┐  ┌────┐                                │  │
│  │  │ A  │  │ B  │  │ C  │                                │  │
│  │  └────┘  └────┘  └────┘                                │  │
│  └────────────────────────────────────────────────────────┘  │
│  Main axis: horizontal (justify-content)                     │
│  Cross axis: vertical (align-items)                          │
│                                                              │
│  flex-col:                                                   │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  ┌────┐                                                │  │
│  │  │ A  │                                                │  │
│  │  └────┘                                                │  │
│  │  ┌────┐                                                │  │
│  │  │ B  │                                                │  │
│  │  └────┘                                                │  │
│  └────────────────────────────────────────────────────────┘  │
│  Main axis: vertical (justify-content)                       │
│  Cross axis: horizontal (align-items)                        │
└──────────────────────────────────────────────────────────────┘

Justify Content

┌──────────────────────────────────────────────────────────────┐
│  justify-start:                                              │
│  │[A][B][C]                    │                             │
│                                                              │
│  justify-center:                                             │
│  │        [A][B][C]            │                             │
│                                                              │
│  justify-end:                                                │
│  │                    [A][B][C]│                             │
│                                                              │
│  justify-between:                                            │
│  │[A]         [B]         [C]  │                             │
│                                                              │
│  justify-around:                                             │
│  │ [A]   [B]   [C]            │                             │
│                                                              │
│  justify-evenly:                                             │
│  │   [A]   [B]   [C]          │                             │
└──────────────────────────────────────────────────────────────┘

Align Items

┌──────────────────────────────────────────────────────────────┐
│  items-start:                items-center:                   │
│  ┌────┐┌────┐┌────┐          ┌────┐┌────┐┌────┐              │
│  │ A  ││ B  ││ C  │          │    ││ B  ││    │              │
│  │    ││    ││    │          │ A  ││    ││ C  │              │
│  │    ││    ││    │          │    ││    ││    │              │
│  └────┘└────┘└────┘          └────┘└────┘└────┘              │
│                                                              │
│  items-end:                  items-stretch:                  │
│  ┌────┐┌────┐┌────┐          ┌────┐┌────┐┌────┐              │
│  │    ││    ││    │          │ A  ││ B  ││ C  │              │
│  │    ││    ││    │          │    ││    ││    │              │
│  │ A  ││ B  ││ C  │          └────┘└────┘└────┘              │
│  └────┘└────┘└────┘          All same height                 │
└──────────────────────────────────────────────────────────────┘

Grow and Shrink

┌──────────────────────────────────────────────────────────────┐
│  flex-none          flex-1          flex-1                   │
│  ┌────────┐         ┌──────────┐   ┌──────────┐             │
│  │ Fixed  │         │  Equal   │   │  Equal   │             │
│  └────────┘         └──────────┘   └──────────┘             │
│                                                              │
│  flex-none: does not grow or shrink                          │
│  flex-1:    grows and shrinks to fill available space        │
│                                                              │
│  WITH min-w-0:                                               │
│  ┌──────────────────────────────┐  ┌────────┐               │
│  │  Long text truncated...      │  │ Button │               │
│  └──────────────────────────────┘  └────────┘               │
│  └── min-w-0 allows shrink below content width               │
└──────────────────────────────────────────────────────────────┘

Responsive Direction

┌──────────────────────────────────────────────────────────────┐
│  MOBILE (flex-col)              DESKTOP (md:flex-row)        │
│  ┌────────────────────┐         ┌──────────┬──────────────┐  │
│  │  ┌──────────────┐  │         │          │              │  │
│  │  │   Sidebar    │  │         │ Sidebar  │   Content    │  │
│  │  └──────────────┘  │         │          │              │  │
│  │  ┌──────────────┐  │         │          │              │  │
│  │  │   Content    │  │         │          │              │  │
│  │  └──────────────┘  │         │          │              │  │
│  └────────────────────┘         └──────────┴──────────────┘  │
│                                                              │
│  <div class="flex flex-col md:flex-row gap-4">               │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Container	`flex`, `inline-flex`
Direction	`flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
Wrap	`flex-wrap`, `flex-nowrap`, `flex-wrap-reverse`
Justify	`justify-start`, `justify-center`, `justify-between`, `justify-evenly`
Align items	`items-start`, `items-center`, `items-stretch`, `items-baseline`
Align self	`self-center`, `self-start`, `self-end`, `self-stretch`
Gap	`gap-`, `gap-x-`, `gap-y-*`
Grow	`grow`, `grow-0` (v4 alias for `flex-grow-*`)
Shrink	`shrink`, `shrink-0` (v4 alias for `flex-shrink-*`)
Flex shorthand	`flex-1`, `flex-auto`, `flex-initial`, `flex-none`
Truncation	Requires `min-w-0` on flex child
Responsive	`flex-col md:flex-row`

Key takeaways:

flex establishes the container; direction sets the main axis. flex-row lays children horizontally, flex-col vertically. The main axis determines what justify-* distributes along, and the cross axis determines what items-* aligns along.
justify-* distributes along the main axis. justify-between pushes the first and last children to the edges with equal space between. justify-center centers the group. justify-evenly produces the most uniform spacing.
items-* aligns along the cross axis. items-center is the most common, used for aligning icons with text. items-stretch is the default and makes all children the same height.
self-* overrides alignment for one child. When most children should align one way but one needs a different alignment, self-start, self-center, or self-end applies to that child alone.
gap-* spaces children without margin. Gap does not add space at the edges, unlike margins. It works with wrapping and is the recommended replacement for the space-x/space-y utilities .
grow-* and shrink-* control space distribution. grow makes a child fill available space; shrink-0 prevents it from shrinking. flex-1 combines grow and shrink for equal distribution.
min-w-0 is required for truncation in flex. A flex child’s automatic minimum size is its content width, which prevents shrinking. min-w-0 removes that floor so truncate can work.
In v4, flex-grow-* and flex-shrink-* are aliased to grow-* and shrink-*. The shorter names are the v4 convention; the longer names still work but are deprecated .

Remember: Flexbox is a one-dimensional layout system: it arranges children along a main axis and aligns them along a cross axis. The container properties — direction, wrap, justify, items, gap — control the layout of all children. The item properties — grow, shrink, self, order — control individual children. The most common patterns are flex items-center gap-4 for horizontal alignment, flex flex-col gap-2 for vertical stacks, flex justify-between items-center for navbars, and flex-1 min-w-0 for flexible content that can truncate. The v4 aliases shortened flex-grow and flex-shrink to grow and shrink, and gap replaced the older space utilities. Understanding the main axis and cross axis is the key to reasoning about any flex layout: justify distributes along the main axis, items aligns along the cross axis, and the axis swaps when the direction changes from row to column.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!