Skip to content
Get packs

Solved by Flexbox

A web showcase of CSS layout problems that Flexbox now solves easily.

GitHub Download source
Stars
12.9k
Forks
976
Licence
MIT
Language
CSS
Last update
3.9 years ago
Type
Learning resource

No commits in over a year — check for forks or alternatives before adopting.

What it is

Solved by Flexbox is a website that collects layout problems which were once hard or impossible to do with CSS alone, and shows how Flexbox handles each one. It is useful as a visual reference for people learning CSS layout. The project is written in CSS and the README describes it as a showcase rather than a library.

  • Browse the hosted site to see examples of layout problems Flexbox solves
  • Run the site locally with npm start to view and edit the examples
  • Use the examples as reference when building your own Flexbox layouts

Great for

  • Developers learning CSS Flexbox
  • Students studying modern CSS layout
  • Front-end developers wanting quick visual examples of layout techniques

Not ideal for

  • People looking for a ready-to-use UI library, because the README describes only a showcase site
  • Readers who need Flexbox API documentation, since the README does not cover this
Step-by-step guide: how to use Solved by FlexboxInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js

    Clone the repository

    git clone https://github.com/philipwalton/solved-by-flexbox.git

    Change into the project directory

    cd solved-by-flexbox

    Install dependencies

    npm install

    Build and serve the site locally

    npm start
  2. 2

    Run it

    • Run npm start in the project folder
    • Open http://localhost:4000 in your browser
    • Optionally run npm start -- -p 8080 to use a different port
  3. 3

    Get the most out of it

    • Edit the source and reload the browser, since npm start rebuilds the site when files change
    • Compare the hosted site with the community translations listed in the README to see the same content in other languages

Downloads

Source code (.zip)master branch · straight from GitHubOfficial website & docsphilipwalton.github.io/solved-by-flexbox/

Strengths

  • Shows concrete, visual examples of real layout problems
  • Simple setup described in the README using Node.js
  • MIT licensed, so the code can be read and reused

Trade-offs

  • The README is short and gives little detail about the individual examples
  • Last push was in December 2022, so it may not reflect newer CSS features
  • Requires Node.js to run locally

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.