Flexbox Layout
Flexbox makes it easy to align elements, distribute space along an axis, and build flexible responsive layouts.
1. Flex Direction (`flex-row` vs `flex-col`)
`flex-row` (Default Horizontal):
Item 1
Item 2
Item 3
`flex-col` (Vertical Stack):
Item 1
Item 2
Item 3
2. Justify Content (Main Axis Alignment)
`justify-between`:
LogoNav ItemLogin
`justify-center`:
Center ACenter B
3. Align Items (Cross Axis Alignment)
`items-center` with different element heights:
Short
Medium
Tall
4. Flex Grow (`flex-1`)
<div className="flex gap-4">
<div className="w-32 bg-gray-200 p-3">Fixed Sidebar (128px)</div>
<div className="flex-1 bg-blue-500 text-white p-3">
Flexible Main Content Area (Expands to fill remaining width!)
</div>
</div>
