Day 1: Flex Container & Direction

Daily Objective

Master the fundamentals of Flexbox: defining containers and setting main-axis directions.

1. Flexbox Concepts

Flexbox organizes elements along a single axis at a time:

• Main Axis: Defined by flex-direction (horizontal by default).
• Cross Axis: Perpendicular to the main axis.

.flex-container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

Daily Hands-on Practice (70%)

1. Create a container with 3 items and turn on display: flex.
2. Toggle flex-direction: column and row-reverse to observe axis changes.