Flexbox Generator

Flexbox is a layout system that makes arranging elements in rows or columns super easy. No floats, no weird hacks—just straightforward alignment and distribution. Set display: flex on a container and its direct children become flex items.

The magic is how flex handles space. Items can grow to fill available space or shrink to fit. You get control over direction, alignment, wrapping, order—all the stuff that used to take forever with older techniques.

I use flex for navigation bars, card layouts, form controls, centering things—pretty much anywhere I need items aligned. Works in all modern browsers. Way more intuitive than older layout methods once you get the hang of it.

Justify-content controls the main axis—horizontal if you're in a row, vertical in a column. Align-items handles the cross axis—perpendicular to your main axis.

Here's the mental model: justify is "along the flow," align is "across the flow." Need items centered both ways? justify-content: center; align-items: center; on the parent. Done. No margin tricks needed.

Three properties that control how flex items size themselves:

• flex-basis: Initial size before growing or shrinking—like 200px, 50%, or auto
• flex-grow: How items expand when there's extra space—1 means equal share, 2 takes twice as much
• flex-shrink: How items compress when space is tight—1 allows shrinking, 0 prevents it

Usually you'll set these together with shorthand: flex: 1 1 200px is grow 1, shrink 1, basis 200px. Super handy for responsive layouts.

Row is the default—items line up horizontally, left to right. Perfect for nav bars, toolbars, horizontal card lists. Column stacks items vertically. Great for sidebars, vertical menus, mobile layouts where everything needs to stack.

Switch between them with media queries for responsive designs—row on desktop, column on mobile.

Don't forget row-reverse and column-reverse. They flip the order without touching your HTML.

Just remember—changing direction also swaps what counts as the main axis vs cross axis for justify-content and align-items.

Perfect centering: display: flex; justify-content: center; align-items: center; on the parent. Centers child both ways. Use it everywhere—modals, hero sections, loading screens.

Equal-width columns: flex: 1 on each child. They'll split available space evenly. Add gap: 1rem on the parent for spacing. Beats float-based grids by a mile.

Sticky footer: Container with display: flex; flex-direction: column; min-height: 100vh; and main content gets flex: 1. Footer sticks to bottom even with little content.

Yep, all modern browsers support it fully. Chrome, Firefox, Safari, Edge—you're good. Even mobile browsers handle it great. No vendor prefixes needed anymore for the standard syntax. For most projects in 2024 and beyond, you can use flex without worrying.

IE 11 has partial support with some bugs. If you need to support it, stick to simpler flex patterns and test thoroughly. Tools like Autoprefixer can add vendor prefixes automatically if needed.