solved-by-flexbox
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
A showcase website with working examples demonstrating how CSS Flexbox solves layout problems that were previously difficult or impossible, like sticky footers, equal-height columns, and vertical centering.
Solved by Flexbox is a showcase website that demonstrates CSS layout problems that were once difficult or outright impossible to solve with CSS alone, and shows how those same problems are now straightforward using a CSS feature called Flexbox.
Flexbox is a layout model built into modern web browsers that gives developers much finer control over how elements are sized, aligned, and distributed inside a container. Before Flexbox, common design patterns like vertically centering content, creating equal-height columns, or building sticky footers required elaborate CSS workarounds or JavaScript. This project catalogs those scenarios and presents clean Flexbox-based solutions with working examples.
The repository is the source code for the showcase site, which is published at a public URL. To run it locally, you need Node.js installed, then install the dependencies with npm and start a local server. The site rebuilds automatically as you edit files, so you can experiment with the code and see changes in the browser right away.
The project has been translated into Chinese, Japanese, and Korean by community contributors. The README notes these translations are unofficial and may be out of date.
This is a reference and educational resource rather than a library or tool you install in another project. It is useful for web developers who want to understand what Flexbox is capable of, or who are looking for solutions to specific layout challenges.
Where it fits
- Learn how to build a sticky footer with CSS Flexbox by studying a working demo and copying the clean solution.
- Create equal-height columns in a layout using the Flexbox technique shown in the examples, without JavaScript hacks.
- Vertically center content inside a container using the straightforward Flexbox approach instead of old CSS workarounds.
- Run the site locally with Node.js, modify the Flexbox examples, and see changes in the browser instantly.