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)

{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

• Flex Item is child-of:flex-container