Flexibility Without Limits

Flexbox (Flexible Box Layout) is a one-dimensional layout method. " One-dimensional " means Flexbox works with only one axis at a time: either horizontally or vertically.

Key Roles:

1. Flex Container: The element inside which " centering magic " is enabled.
2. Flex Items: Those we align. Important: flex properties affect only direct children.

Main and Cross Axes — The Foundation

This is the most important concept. Imagine two strings stretched inside the container.

• Main Axis: Elements are arranged along it.
• Cross Axis: Perpendicular to the main axis.