Day 24: The Odin Project

Day 24 of my coding journey, and today was all about laying down structural roots with The Odin Project. I spent my time diving deep into CSS Flexbox, focusing specifically on how flex-direction completely rewrites the rules of element layout.

If you’ve ever wrestled with aligning items in CSS, understanding the main axis versus the cross axis is the ultimate light bulb moment. Here is a quick breakdown of what clicked for me today.

The Two Axes of Flexbox

Everything in Flexbox relies on two directional lines. Changing flex-direction swaps which axis controls what.

Core Takeaways

• The Axis Flip: The biggest mental shift is realizing that justify-content does not mean "horizontal alignment." It always aligns along the main axis. When you switch flex-direction to column, justify-content suddenly handles vertical spacing, while align-items takes over horizontal positioning.
• Direction Controls Flow: Setting flex-direction: column turns your flex container into a vertical stack instantly—perfect for card layouts, navigation menus on mobile screens, or form fields.
• Source Order vs. Visual Order: Options like row-reverse allow you to change how elements appear on screen without touching the underlying HTML structure, though it’s important to keep accessibility and tab order in mind.

Consistency over intensity. Small daily steps through TOP are building up real momentum!