Flexbox

Per Specification: the flexbox model provides for an efficient way to layout, align, and distribute space among elements within your document, even when the viewport and the size of your elements is dynamic or unknown.

Flex Container

From Flex Container

Go to text →

Task #task.write-well-formatted-note (Private) for flex-wrap.

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

From Flexbox Simplest Start Example

Go to text →

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

From Flexbox Properties

Go to text →

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

flex-direction

From flex-direction (FlexBox Property)

Go to text →

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

too many nested note refs

flex-wrap

too many nested note refs

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.

too many nested note refs

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.

too many nested note refs

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.

Flex Item

From Flex Item

Go to text →

Flex items: The children elements within a Flex Container.

As soon as you set the display property to flex of ul (unordered list), the unordered list automatically becomes the flex container and the child elements (in this case, the list elements li) become flex items.

Properties

From Flex Item Properties

Go to text →

Some references for flex item properties: www.educative.io course (ok but he confuses some terminoly around main axis).

Example Usage:

From Flex Items to Take up Available Space on Main Axis (flex: 1)

Go to text →

Shorthanded as flex: 1;

or flex: 1 1 0;

.child {
  /* Allows the child to grow and fill remaining space */
  flex-grow: 1;

  /* Allows the child to shrink if there's not enough space */
  flex-shrink: 1;

  /* Starts with no base size; enables flexible resizing */
  flex-basis: 0;
}

too many nested note refs

GT-Sandbox-Snapshot

Command to reproduce:

gt.sandbox.checkout.commit 1d051ecce7083ca9b340 \
&& 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

Purpose

flex-grow: 1 Instructs this item to expand and occupy any remaining space in the container.
flex-shrink: 1 Allows it to contract proportionally if there’s less space than its content needs.
flex-basis: 0% Sets its starting size to zero, so growth/shrink behavior is driven purely by available space.

When to Use

You want one or more flex items to share leftover space evenly.
You have a mix of fixed-size and flexible elements (e.g. a fixed sidebar next to a content panel that fills the rest).
You need a fluid, responsive layout where children naturally stretch or shrink.

Main-Axis Impact

These properties control sizing along the main axis defined by the parent’s flex-direction:
- If flex-direction: row, they adjust width.
- If flex-direction: column, they adjust height.

Using this pattern ensures your flex children flexibly fill whatever space is available along the main axis, while still respecting margins, padding, borders, and any max-/min-size limits.

Relationships

Flex Item is child-of:Flex Container

References

Understanding-flexbox-everything-you-need-to-know

Children

References