Flex Container

Task write-well-formatted-note for flex-wrap.

Flex Container is the parent element you’ve set display: flex on.

Flexbox Simplest Start Example

To start using the Flexbox model, all you need to do is first define a flex-container.

Example

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

To use the flexbox model, you must make a parent element a flex container (aka flexible container).

You do this by setting display: flex or display: inline-flex for the inline variation. It’s that simple, and from there you’re all set to use the Flexbox model.

/*Make parent element a flex container*/
ul {
  display: flex; /*or inline-flex*/
}

Basic Flexbox GT-Sandbox-Snapshot

Command to reproduce:

gt.sandbox.checkout.commit 68cf8efc8214fbb76aed \
&& 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

Link to original

Flexbox Properties

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

flex-direction

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;
}

{max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

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 {max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

Link to original

flex-wrap

Flex Wrap

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.

Link to original

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

Flex Flow

Shorthand for:

flex-direction

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;
}

{max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

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 {max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

Link to original

flex-wrap

Flex Wrap

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.

Link to original

Example

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

Link to original

justify-content

justify-content (FlexBox property)

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.

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

{max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

Link to original

---

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

{max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

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.

Link to original

align-items

Align Items

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

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

{max-width: 500px, display: block, margin: 0 auto, border: 5px solid black}

Link to original

Link to original

align-content

align-content

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

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

Link to original

References

• educative.io: The Flex Container Properties

Link to original

Relationships

• parent-of:flex-item

References

• Intro to Flexbox