Here is your Flexbox content with proper formatting and spacing for easy copy-pasting into your WordPress blog:

---

What is Flexbox?

Flexbox, short for Flexible Box Layout, is a one-dimensional layout system in CSS. It helps with laying out, aligning, and distributing space among items in a container, even when their size is unknown or changes. Unlike older layout methods like float, table, or inline-block, Flexbox gives you better control over alignment, spacing, and order.

Flexbox is especially useful for creating modern responsive interfaces that fit different screen sizes easily.

When to Use Flexbox?

Use Flexbox when laying out items in one direction, either as a row or a column. It is perfect when you want:

• Equal spacing between items.
• Items to wrap as the screen size decreases.
• Vertical or horizontal centering.
• Flexible navigation bars, cards, and content sections.

Common Flexbox Use Cases

• Navigation bars
• Card-based layouts
• Equal-height columns
• Centering content (horizontally and vertically)
• Responsive image galleries
• Forms with label-input alignment

Basic Setup

To enable Flexbox on a container, set:

.container {
  display: flex;
}

This turns .container into a flex container, and all its children become flex items.

Understanding the Axes

Before going into properties, let’s look at the two axes:

• Main Axis: The main direction in which flex items are placed. It is a row (horizontal) by default.
• Cross Axis: Perpendicular to the main axis. If the main axis is row, the cross axis is column (vertical).

Key Flexbox Properties (on the Container)

1. flex-direction – Controls the main axis

This defines the direction in which the flex items are placed inside the container.

.container {
  flex-direction: row; /* default */
}

Values:

• row – Items are arranged from left to right (default)
• row-reverse – Items are arranged from right to left
• column – Items are placed from top to bottom
• column-reverse – Items are placed from bottom to top

Example:

.container {
  display: flex;
  flex-direction: column;
}

This stacks all children vertically.

2. justify-content – Aligns items along the main axis

.container {
  justify-content: center;
}

Values:

• flex-start – Items align to the start of the main axis
• flex-end – Items align to the end
• center – Items are centered
• space-between – Equal space between items
• space-around – Equal space around each item
• space-evenly – Equal space between and around items

Example:

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

This is useful for navbars, with the logo at the start and menu at the end.

3. align-items – Aligns items along the cross axis

.container {
  align-items: center;
}

Values:

• stretch – Items stretch to fill the container (default)
• flex-start – Align to the start of the cross axis
• flex-end – Align to the end
• center – Centered vertically (for row layout)
• baseline – Align items based on the text baseline

Example:

.container {
  display: flex;
  align-items: flex-end;
}

---

4. flex-wrap – Allows items to wrap to the next line

By default, items try to fit in one line, which can cause squishing or overflow. Use wrap to allow multi-line.

.container {
  flex-wrap: wrap;
}

Values:

• nowrap – All items on a single line (default)
• wrap – Items wrap to the next line
• wrap-reverse – Items wrap in reverse order

Example:

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

This is essential for responsive design!

5. align-content – Aligns wrapped lines

This applies when there are multiple lines of items (with flex-wrap: wrap). It controls the spacing between lines on the cross axis.

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

Values:

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly
• stretch (default)

Flexbox Properties on Children (Flex Items)

Flexbox is also about controlling how each child behaves inside a flex container.

1. flex-grow – Grow factor

This defines how much an item can grow compared to others.

.item {
  flex-grow: 1;
}

A value of 0 (default) means “do not grow.” A value of 1 or more allows items to expand to fill available space.

Example:

.item-1 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2;
}

Now, .item-2 will take up twice the space of .item-1.

2. flex-shrink – Shrink factor

This defines how much an item can shrink when space is tight.

.item {
  flex-shrink: 1;
}

Set to 0 to prevent shrinking.

3. flex-basis – Initial size before growing or shrinking

.item {
  flex-basis: 200px;
}

This sets the starting width or height of the item before applying grow or shrink rules.

4. flex – Shorthand for flex-grow, flex-shrink, and flex-basis

.item {
  flex: 1 1 100px;
}

This is shorthand for:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;

Or simply:

.item {
  flex: 1; /* = 1 1 0 */
}

5. align-self – Override align-items for a specific item

.item {
  align-self: flex-start;
}

This is helpful if one item needs different alignment.

Real-World Examples

Navbar with Space Between:

<div class="navbar">
  <div class="logo">LOGO</div>
  <div class="menu">Home | About | Contact</div>
</div>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Centering an Element:

<div class="parent">
  <div class="child">Centered</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Responsive Cards

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 250px;
  border: 1px solid #ccc;
  padding: 10px;
}

This layout lets cards adjust to different screens.

Common Mistakes & Tips

• For vertical centering, remember you need both justify-content and align-items.
• Avoid using fixed widths inside flexible containers unless necessary.
• Always use flex-wrap: wrap if items overflow on small screens.
• Combine Flexbox with media queries for better responsiveness.

Flexbox vs Grid: When to Use What?

Feature	Flexbox	CSS Grid
Layout Direction	One-dimensional	Two-dimensional
Use Case	Navbars, cards, forms	Full page layouts
Alignment	Easy	Very powerful
Learning Curve	Easy	Medium

Use Flexbox when arranging items in a line (horizontal or vertical).
Use Grid when designing complex rows and columns at once.

Summary of Flexbox Properties

On the Container:

Property	Purpose
display: flex	Enables Flexbox
flex-direction	Row or Column direction
justify-content	Align along main axis
align-items	Align along cross axis
align-content	Align multiple lines
flex-wrap	Allow wrapping

On Flex Items:

Property	Purpose
flex-grow	Allows item to grow
flex-shrink	Allows item to shrink
flex-basis	Sets initial size
flex	Shorthand for grow/shrink/basis
align-self	Overrides container alignment