A Comprehensive Guide to CSS Flexbox Layout

Description:
Flexbox (Flexible Box Layout) is a one-dimensional layout model introduced in CSS3, designed for arranging, aligning, and distributing space among items within a container. It is particularly suitable for layouts involving dynamic or unknown-sized elements and serves as an effective replacement for float and table-based layouts.

Core Concepts:

1. Container (Flex Container): The element with display: flex set; its direct children automatically become flex items.
2. Item (Flex Items): Each direct child element of the container.
3. Main Axis: The primary direction along which items are arranged (default is horizontal).
4. Cross Axis: The direction perpendicular to the main axis (default is vertical).

Step 1: Enable Flex Layout
Set display: flex or display: inline-flex on the container, and its children immediately become flex items:

.container {
  display: flex; /* Block-level flex container */
}

Step 2: Control Main Axis Direction (flex-direction)
Define the main axis direction using flex-direction, which affects the order of item arrangement:

• row (default): Horizontal, left to right
• row-reverse: Horizontal, right to left
• column: Vertical, top to bottom
• column-reverse: Vertical, bottom to top

Example: Arrange items vertically

.container {
  flex-direction: column;
}

Step 3: Control Main Axis Wrapping (flex-wrap)
By default, items are squeezed onto a single line. flex-wrap controls whether items wrap:

• nowrap (default): No wrapping
• wrap: Wrap onto multiple lines downward
• wrap-reverse: Wrap onto multiple lines upward

Example: Allow wrapping in reverse

.container {
  flex-wrap: wrap-reverse;
}

Step 4: Main Axis Alignment (justify-content)
Distributes items along the main axis:

• flex-start (default): Align to the start
• flex-end: Align to the end
• center: Center alignment
• space-between: Items evenly distributed, first at start, last at end
• space-around: Items evenly distributed with equal space around each
• space-evenly: Items evenly distributed with equal space between them and the edges

Example: Distribute items evenly

.container {
  justify-content: space-between;
}

Step 5: Cross Axis Alignment (align-items)
Controls how items are aligned along the cross axis:

• stretch (default): Stretch to fill the container
• flex-start: Align to the start of the cross axis
• flex-end: Align to the end of the cross axis
• center: Center alignment along the cross axis
• baseline: Align based on text baseline

Example: Vertically center all items

.container {
  align-items: center;
}

Step 6: Multi-line Alignment (align-content)
Controls the alignment of lines along the cross axis when there are multiple lines (requires flex-wrap: wrap):

• stretch (default): Lines stretch to fill remaining space
• flex-start: All lines packed to the start of the cross axis
• center: All lines centered along the cross axis

Example: Center multiple lines

.container {
  flex-wrap: wrap;
  align-content: center;
}

Step 7: Item Properties (flex-grow, flex-shrink, flex-basis)

• flex-grow: Defines the ability for an item to grow (default 0, no growth)
• flex-shrink: Defines the ability for an item to shrink (default 1, can shrink)
• flex-basis: Defines the initial size of an item (default auto)

Shorthand flex: grow shrink basis:

.item {
  flex: 1; /* Equivalent to 1 1 0% */
  flex: 0 0 100px; /* Fixed width of 100px, no stretching or shrinking */
}

Step 8: Custom Item Alignment (align-self)
A single item can override the container's align-items setting:

.item {
  align-self: flex-end; /* Align this specific item to the end */
}

Practical Application Example: Achieving Centered Layout

.container {
  display: flex;
  justify-content: center; /* Center along main axis */
  align-items: center;     /* Center along cross axis */
  height: 300px;
}

Key Points:

• Flexbox is suitable for one-dimensional linear layouts; use Grid for two-dimensional layouts.
• Items are arranged along the main axis by default; distinguish between main axis and cross axis properties.
• Item properties (e.g., flex) take precedence over container properties (e.g., justify-content).