Glassthought

Flexbox

1 min read

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

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

img{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 img{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

ValueDescription
nowrapAll items stay on one line. Items will shrink (if allowed) rather than wrap.
wrapItems wrap onto multiple lines from top to bottom (for flex-direction: row).
wrap-reverseItems 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;
}

img{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 img{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

ValueDescription
nowrapAll items stay on one line. Items will shrink (if allowed) rather than wrap.
wrapItems wrap onto multiple lines from top to bottom (for flex-direction: row).
wrap-reverseItems 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)

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

Link to original

Available Values

ValueDescription
flex-startItems packed toward the start of the main axis (left in LTR).
flex-endItems packed toward the end of the main axis (right in LTR).
centerItems centered along the main axis.
space-betweenItems evenly distributed; first item at start, last at end, equal space between.
space-aroundItems evenly distributed with equal space around each item (half-size space at ends).
space-evenlyItems distributed with equal space between all items, including ends.

Code Example

img{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)

img{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

Link to original

Relationships

References

Link to original

Flex Item

Flex Item

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

Flex Item Properties

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

Example Usage:

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

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

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

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

Link to original

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.

Link to original

Link to original

Relationships

Link to original

References

Graph View