Into CSS Flexbox: From Basic Axis Alignment to Dynamic UI Layouts

Before writing about the process of bringing Deku’s notebook to life, I first need to tackle what preceded it: the Flexbox foundations from that module of The Odin Project. Stepping into intermediate CSS meant figuring out the best way to align elements and unlocking the secret magic behind CSS Flexbox.

It is hard to figure out how to build a fresh working web interface from scratch with custom layouts, moving away from rigid, established grids without relying entirely on tutorials. You use tutorials to figure out how to make things happen, but from there, you have to figure out what feels right. To create something that truly works, you need to understand it to some degree.

If you can move past basic block layouts into a flex-based mental model, reconfiguring the structure of web pages starts to feel smoother over time. To do this, it’s best to break it down in chunks and compartmentalize in blocks. Even before diving into The Odin Project, doing this is something that I learned from Deku before seeing it in action. I keep trying to follow and enforce this to make it a habit. Keeping things organized is key to building a dynamic UI layout.

1. Main and Cross Axis

To explain this simply, Flexbox focuses on distributing space along a single axis at a time. It is a one-dimensional layout model, whereas CSS Grid handles rows and columns simultaneously.

To initialize a flex context, you target a parent container:

CSS

.flex-container {
display: flex;
}

Once activated, you control the flow using two primary axes:

Main Axis: Defined by flex-direction (row by default, or column). Items flow along this axis.

Cross Axis: Perpendicular to the main axis.

1. Space and Alignment

This feels almost like a structural mindfulness applied to web design, but with the added benefit of immediate, tangible results. Once activated, aligning your layout becomes a matter of logic rather than guesswork.

1. Handling Overflow with flex-wrap

This can be a handful to tackle. By default, flex items act like background extras who want to take up space they don’t deserve, squeezing themselves onto a single line and shrinking past their content size if necessary.

To prevent this from happening—and free yourself from the extras using this flex move—enable wrapping so items flow onto multiple lines when the viewport shrinks:

CSS

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

Combined with align-items: stretch, this ensures multi-line flex containers maintain clean, uniform heights across rows without manual height declarations.

1. Improving Sizing with the flex Shorthand

Instead of wasting time manually wrestling with fixed widths, Flexbox lets items dynamically grow and shrink based on available space using flex-grow, flex-shrink, and flex-basis.

Using the shorthand property makes sizing intuitive:

CSS

.flex-item {
flex: 1 1 300px;
/* flex-grow: 1 (will expand to fill space) /
/ flex-shrink: 1 (will shrink if space is tight) /
/ flex-basis: 300px (ideal starting width) */
}

There is really not much more to say here. Making this longer won’t necessarily make it better.

Essentially, what we take from Flexbox is that it gets rid of countless floats, layout hacks, and media query workarounds. It gives you total architectural control over web layouts—laying the exact foundation needed to build complex, responsive user interfaces.

If you can master Flexbox, you can flex your arm proudly!

Transitioning Flexbox into the Making of a Dream

Now as we proceed, here is a summary of what I built before diving in to bring a piece of My Hero Academia to life:

1. The Core Flexbox Foundations (odin-recipes & Practice Projects)

This was all about putting theory into execution: practicing flex containers and directions, axis alignment, flex wrapping, and dynamic sizing flexibility. I experimented with flex-grow, flex-shrink, and flex-basis (and the shorthand flex property) to dictate how elements expand or shrink to fill available space.

1. Beyond Standard UI Layouts: Plus Ultra!

Why treat Flexbox as a mere tool for standard UI layouts when you can go beyond? Plus ultra!

The “Composition Book” Layout: Leveraging Flexbox columns and rows to mimic the structured spine, margins, and layout lines of a physical composition notebook.

Centering the Header: Using flex properties to cleanly anchor and center the classic “CAMPUS” notebook header.

Responsive Spreads: Applying flex-based containers to ensure the notebook pages scaled smoothly and symmetrically across different viewport sizes.

Finally, to be bale to see the famous Hero Analysis for The Future notebook check out:

https://labrava0x.github.io/Deku-s-notebook/

I hope you enjoy it! Go beyond! Plus Ultra!