Flexbox (Flexible Box Layout) is a powerful CSS layout module designed to help you create flexible and responsive layouts with ease. It simplifies the process of aligning and distributing space among items in a container, even when their sizes are unknown or dynamic. In this guide, we’ll explore the key properties of Flexbox, provide examples, and explain how to use them effectively.

1. Flexbox Basics

Flexbox works by turning a container into a flex container and its direct children into flex items. Once you set display: flex on a container, you gain access to a set of properties that control the layout of the items inside.

2. Flex Container Properties

display: flex

This property turns an element into a flex container. All direct children automatically become flex items.

.container {
    display: flex;
}

flex-direction

Defines the direction of the main axis (the primary axis along which items are laid out).

  • row (default): Items are laid out horizontally.
  • row-reverse: Items are laid out horizontally in reverse order.
  • column: Items are laid out vertically.
  • column-reverse: Items are laid out vertically in reverse order. 
.container {
    display: flex;
    flex-direction: row; /* Default */
}

justify-content

Aligns items along the main axis.

  • flex-start (default): Items are packed toward the start of the main axis.
  • flex-end: Items are packed toward the end of the main axis.
  • center: Items are centered along the main axis.
  • space-between: Items are evenly distributed; the first item is at the start, and the last item is at the end.
  • space-around: Items are evenly distributed with equal space around them.
  • space-evenly: Items are evenly distributed with equal space between and around them. 
.container {
    display: flex;
    justify-content: center; /* Centers items horizontally */
}

align-items

Aligns items along the cross axis (perpendicular to the main axis).

  • stretch (default): Items stretch to fill the container.
  • flex-start: Items are aligned to the start of the cross axis.
  • flex-end: Items are aligned to the end of the cross axis.
  • center: Items are centered along the cross axis.
  • baseline: Items are aligned such that their baselines align. 
.container {
    display: flex;
    align-items: center; /* Centers items vertically */
}

flex-wrap

Controls whether items wrap onto multiple lines or stay on a single line.

  • nowrap (default): All items stay on one line.
  • wrap: Items wrap onto multiple lines from top to bottom.
  • wrap-reverse: Items wrap onto multiple lines from bottom to top. 
.container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap */
}

align-content

Aligns lines of items along the cross axis when there is extra space (only applies when there are multiple lines of items).

  • stretch (default): Lines stretch to take up remaining space.
  • flex-start: Lines are packed toward the start of the cross axis.
  • flex-end: Lines are packed toward the end of the cross axis.
  • center: Lines are centered along the cross axis.
  • space-between: Lines are evenly distributed; the first line is at the start, and the last line is at the end.
  • space-around: Lines are evenly distributed with equal space around them. 
.container {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between; /* Distributes lines with space between */
}

3. Flex Item Properties

flex-grow

Defines how much an item will grow relative to other items when there is extra space.

  • Default: 0 (no growth).
  • Higher values mean more growth. 
.item {
    flex-grow: 1; /* Item will grow to fill available space */
}

flex-shrink

Defines how much an item will shrink relative to other items when there is not enough space.

  • Default: 1 (items will shrink equally).
  • Set to 0 to prevent shrinking. 
.item {
    flex-shrink: 0; /* Item will not shrink */
}

flex-basis

Defines the default size of an item before remaining space is distributed.

  • Default: auto (size is based on content).
  • Can be set to a fixed value (e.g., 200px). 
.item {
    flex-basis: 200px; /* Item starts at 200px wide */
}

flex (Shorthand)

Combines flex-grow, flex-shrink, and flex-basis into one property.

.item {
    flex: 1 0 200px; /* flex-grow: 1, flex-shrink: 0, flex-basis: 200px */
}

align-self

Overrides the align-items value for an individual item.

  • Options: auto, flex-start, flex-end, center, baseline, stretch. 
.item {
    align-self: flex-end; /* Aligns this item to the end of the cross axis */
}

order

Changes the order of items without modifying the HTML.

  • Default: 0.
  • Higher values move items later in the order. 
.item1 {
    order: 2; /* Moves this item to the end */
}
.item2 {
    order: 1; /* Moves this item to the start */
}

4. Practical Examples

Example 1: Centering an Item

Center an item both horizontally and vertically within a container.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
}

Example 2: Equal-Width Columns

Create equal-width columns that grow to fill the container.

.container {
    display: flex;
}
.column {
    flex: 1; /* Each column takes equal space */
}

Example 3: Responsive Layout with Wrapping

Create a responsive layout where items wrap onto multiple lines.

.container {
    display: flex;
    flex-wrap: wrap;
}
.item {
    flex: 1 1 200px; /* Items grow, shrink, and have a base width of 200px */
}

Example 4: Reordering Items

Reorder items without changing the HTML.

.container {
    display: flex;
}
.item1 {
    order: 2; /* Moves this item to the end */
}
.item2 {
    order: 1; /* Moves this item to the start */
}

Example 5: Aligning Items to the Bottom

Align items to the bottom of the container.

.container {
    display: flex;
    align-items: flex-end;
    height: 200px; /* Container height */
}

5. Conclusion

Flexbox is an incredibly versatile tool for creating modern, responsive layouts. By mastering the properties of flex containers and flex items, you can build complex designs with minimal code. Use this cheatsheet as a reference to quickly implement Flexbox in your projects!