Lesson 1: Introduction to Flexbox

Flexbox, or the Flexible Box Layout, is a CSS3 layout mode designed to provide a
more efficient way to lay out, align, and distribute space among items in a container.

Basic Concepts:

• Flex Container: The parent element that contains flex items.
• Flex Items: The children elements of the flex container.

Example:

.container {
    display: flex;
}


Lesson 2: Flex Direction

The flex-direction property defines the direction of the flex items.

Values:

• row (default): Items are placed in a row (left to right).
• row-reverse: Items are placed in a row (right to left).
• column: Items are placed in a column (top to bottom).
• column-reverse: Items are placed in a column (bottom to top).

Example:

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


Lesson 3: Justify Content

The justify-content property aligns flex items along the main axis.

Values:

• flex-start (default): Items are packed at the start.
• flex-end: Items are packed at the end.
• center: Items are centered.
• space-between: Items are evenly distributed with space between them.
• space-around: Items are evenly distributed with space around them.
• space-evenly: Items are evenly distributed with equal space around them.

Example:

.container {
    display: flex;
    justify-content: center;
}


Lesson 4: Align Items

The align-items property aligns flex items along the cross axis.

Values:

• stretch (default): Items stretch to fill the container.
• flex-start: Items are aligned at the start.
• flex-end: Items are aligned at the end.
• center: Items are centered.
• baseline: Items are aligned based on their baseline.

Example:

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


Lesson 5: Flex Wrap

The flex-wrap property controls whether flex items should wrap onto multiple lines.

Values:

• nowrap (default): All flex items are on one line.
• wrap: Flex items wrap onto multiple lines from top to bottom.
• wrap-reverse: Flex items wrap onto multiple lines from bottom to top.

Example:

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