CSS FLEXBOX (Flexible Box Layout)

What is Flexbox?

Flexbox is a one-dimensional layout system used to arrange items in:

• a row (horizontal) OR
• a column (vertical)

Best for:

• Navbar
• Centering content
• Small UI layouts
• Aligning items

When you use:

.container {
  display: flex;
}

Two things are created:

• Flex Container (parent)
• Flex Items (children)

Flexbox vs. Grid

CSS Flexbox is used for a one-dimensional layout, with rows OR columns.

CSS Grid is used for a two-dimensional layout, with rows AND columns.

 Axes System

This is the most important concept in Flexbox.

• Main Axis → defined by flex-direction
• Cross Axis → perpendicular to main axis

Flex Container Properties

display:flex;

Activates flexbox.

.container {
  display: flex;
}

flex-direction: ;

Controls direction of items.

flex-direction: row;          /* default */
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

👉 Changes the main axis

justify-content (Main Axis Alignment)

Controls how items are placed along main axis.

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

align-items (Cross Axis Alignment)

align-items: stretch;   /* default */
align-items: center;
align-items: flex-start;
align-items: flex-end;
align-items: baseline;

flex-wrap

👉 Controls wrapping

Example 1: No Wrap (Default)

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

Example 2: Wrap

.container {
  flex-wrap: wrap;
}

👉 Items go to next line

Example 3: Wrap Reverse

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

gap

Example

.container {
  display: flex;
  gap: 20px;
}

👉 Adds spacing without margin

align-content

align-content is used to control the spacing between rows (or columns) of flex items when they wrap onto multiple lines.

👉 Important:

It only works when flex-wrap:wrap; is enabled AND there are multiple lines.

🔥 Key Idea

• align-items → aligns items inside a single row
• align-content → aligns multiple rows as a group

 Values of align-content

1. flex-start

Lines are packed at the top

.container {
  align-content: flex-start;
}

2. flex-end

Lines are packed at the bottom

.container {
  align-content: flex-end;
}

3. center

Lines are centered vertically

.container {
  align-content: center;
}

4. space-between

Equal space between rows

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

5. space-around

Equal space around rows

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

6. space-evenly

Equal spacing everywhere

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

7. stretch (default)

Rows stretch to fill container

.container {
  align-content: stretch;
}

flex-flow is a shorthand property in CSS Flexbox.

👉 It combines two properties into one:

• flex-direction
• flex-wrap

Your example

.container {
  flex-flow: row wrap;
}