Flexbox Properties

There are 6 different properties the flex container can take on.

flex-direction

From flex-direction (FlexBox Property)

graph LR FD[flex-direction, Controls:] --> Order[Which order] FD --> Direction[Which direction] FD --> Side[From which side of the box] Order --> Placement[the elements are placed] Direction --> Placement Side --> Placement

Flex Direction Controls:

which order
which direction
from which side of the box

the elements are placed.

/* 
There are 4 values for the property, example setting this property
where ul represents a flex container, */
ul {
  flex-direction: row || column || row-reverse || column-reverse;
}

GT-Sandbox-Snapshot

Command to reproduce:

gt.sandbox.checkout.commit 870edcc21fa6ffb73d26 \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome ./main/index.html"

Recorded output of command:

       _chrome ./main/index.html
Opening in chrome: ./main/index.html

Controls main axis direction (vertical/horizontal)

The flex-direction controls whether main-axis is vertical or horizontal.

Below is example of axis when flex-direction is set to row

flex-wrap

From Flex Wrap

Go to text →

#llm.o4-mini-high

The flex-wrap property determines whether flex items are forced onto a single line or can wrap onto multiple lines when they overflow the container.

Values & Behavior

Value	Description
`nowrap`	All items stay on one line. Items will shrink (if allowed) rather than wrap.
`wrap`	Items wrap onto multiple lines from top to bottom (for `flex-direction: row`).
`wrap-reverse`	Items wrap onto multiple lines but in reverse order (bottom to top for rows).

.container {
  display: flex;
  flex-wrap: wrap; /* allow wrapping */
}

Code Example

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 300px; /* container narrower than 4 items */
}
.item {
  flex: 1 1 100px; /* grow, shrink, base width */
}

Result: Items 1–3 fit on the first row; item 4 wraps onto the second row.*

Use Cases

Responsive Galleries: Automatically move thumbnails to new rows when the viewport narrows.
Navigation Menus: Wrap menu items to a second line on smaller screens instead of shrinking text.
Tag Clouds & Chips: Let labels flow onto multiple lines gracefully.

Tip: Combine with justify-content and align-content to control spacing of wrapped lines.

flex-flow (shorthand for flex-direction & flex-wrap)

From Flex Flow

Go to text →

Shorthand for:

flex-direction

From flex-direction (FlexBox Property)

Go to text →

Flex Direction Controls:

which order
which direction
from which side of the box

the elements are placed.

/* 
There are 4 values for the property, example setting this property
where ul represents a flex container, */
ul {
  flex-direction: row || column || row-reverse || column-reverse;
}

GT-Sandbox-Snapshot

Command to reproduce:

gt.sandbox.checkout.commit 870edcc21fa6ffb73d26 \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome ./main/index.html"

Recorded output of command:

       _chrome ./main/index.html
Opening in chrome: ./main/index.html

Controls main axis direction (vertical/horizontal)

The flex-direction controls whether main-axis is vertical or horizontal.

Below is example of axis when flex-direction is set to row

flex-wrap

From Flex Wrap

Go to text →

#llm.o4-mini-high

The flex-wrap property determines whether flex items are forced onto a single line or can wrap onto multiple lines when they overflow the container.

Values & Behavior

Value	Description
`nowrap`	All items stay on one line. Items will shrink (if allowed) rather than wrap.
`wrap`	Items wrap onto multiple lines from top to bottom (for `flex-direction: row`).
`wrap-reverse`	Items wrap onto multiple lines but in reverse order (bottom to top for rows).

.container {
  display: flex;
  flex-wrap: wrap; /* allow wrapping */
}

Code Example

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  width: 300px; /* container narrower than 4 items */
}
.item {
  flex: 1 1 100px; /* grow, shrink, base width */
}

Result: Items 1–3 fit on the first row; item 4 wraps onto the second row.*

Use Cases

Responsive Galleries: Automatically move thumbnails to new rows when the viewport narrows.
Navigation Menus: Wrap menu items to a second line on smaller screens instead of shrinking text.
Tag Clouds & Chips: Let labels flow onto multiple lines gracefully.

Tip: Combine with justify-content and align-content to control spacing of wrapped lines.

Example

ul {
	flex-flow: row wrap; /*direction [row] and [wrap] items */
}

justify-content

From justify-content (FlexBox property)

Go to text →

#llm.o4-mini-high

The justify-content property aligns flex items along the main axis (horizontal in default flex-direction: row). It distributes extra space when items do not fully occupy the container.

From Image: Flex box Main Axis Horizontal (flex-direction: row)

Go to text →

Available Values

Value	Description
`flex-start`	Items packed toward the start of the main axis (left in LTR).
`flex-end`	Items packed toward the end of the main axis (right in LTR).
`center`	Items centered along the main axis.
`space-between`	Items evenly distributed; first item at start, last at end, equal space between.
`space-around`	Items evenly distributed with equal space around each item (half-size space at ends).
`space-evenly`	Items distributed with equal space between all items, including ends.

Code Example

GT-Sandbox-Snapshot

Command to reproduce:

gt.sandbox.checkout.commit a57600e8b590e7527511 \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome ./main/index.html"

Recorded output of command:

       _chrome ./main/index.html
Opening in chrome: ./main/index.html

Use Cases

Navigation Bars: Align links to the left, center, or right.
Toolbars: Distribute buttons evenly or group them at edges.
Card Layouts: Control spacing between cards in a row.

Tip: For vertical alignment (cross-axis), use align-items or align-content instead.

align-items

From Align Items

Go to text →

align-items like justify-content but for cross-axis.

From Image: Flex box Main Axis Horizontal (flex-direction: row)

Go to text →

align-content

From align-content

Go to text →

The align-content property is used on multi-line flex-containers.

Controls how the flex-items are aligned in a multi-line flex container.

References

educative.io: The Flex Container Properties

Children

Backlinks

Flex Container

References