Guide · Open source
How to use solved-by-flexbox: run the showcase locally
Updated · written with AI from the project's own documentation and checked against our catalogue data
Solved by Flexbox is a showcase website that collects layout problems which were once hard or impossible to solve with CSS alone, and shows how Flexbox handles each one. This guide explains how to run a local copy of the site with Node.js so you can browse the examples and edit them. By the end you will have the site running in your browser at localhost.
Solved by Flexboxphilipwalton/solved-by-flexbox · ★ 12.9k · MIT Install options & downloads Quick start
- 1Install Node.js. Make sure Node.js is installed on your system, as the README requires it to build the site.
- 2Clone the repository. Run git clone https://github.com/philipwalton/solved-by-flexbox.git to download the project.
- 3Enter the project folder. Run cd solved-by-flexbox to move into the cloned directory.
- 4Install dependencies. Run npm install to install the project dependencies.
- 5Start the local server. Run npm start to build and serve the site at http://localhost:4000.
- 6Open the site. Visit http://localhost:4000 in your browser to browse the Flexbox examples.
What is solved-by-flexbox?
Solved by Flexbox is a website, written in CSS, that demonstrates layout problems that used to be hard or impossible to solve with CSS alone. Each problem is shown alongside how Flexbox makes it straightforward.
The project's README describes it as a showcase rather than a library, so you use it as a reference and learning resource, not as code to import into your own project.
- Best for developers learning CSS Flexbox
- Useful for students studying modern CSS layout
- Helpful for front-end developers who want quick visual examples
What you need before you start
The site is built with Node.js, so Node.js must be installed on your system. You also need git to clone the repository. The source does not specify other requirements.
- Node.js installed
- git available on your command line
How do you clone and install solved-by-flexbox?
Open a terminal, clone the repository, change into the project folder, and install the dependencies with npm.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox
npm installHow do you run the site locally?
Run npm start from the project directory. This builds the site and serves it on port 4000. Open http://localhost:4000 in your browser to view it.
While the server runs, it listens for changes and rebuilds the site as needed. Edit the code, refresh the browser, and you will see your changes.
To use a different port, pass the port number after two dashes.
- Default address: http://localhost:4000
- Custom port example: npm start -- -p 8080
npm start
npm start -- -p 8080How do you use the site to learn Flexbox?
Browse the examples on the local site or on the public site at https://philipwalton.github.io/solved-by-flexbox/. Each example pairs a layout problem with its Flexbox solution, so you can compare the two and see how the approach changes.
Because the site rebuilds when files change, you can also experiment with the code and watch the result update in the browser.
- Open the public site to browse without installing anything
- Run it locally to test your own changes
Troubleshooting and translations
The README does not list troubleshooting steps. If the server does not start, check that Node.js and npm are installed and that npm install finished. If port 4000 is busy, use the custom port option.
The README also links community translations into Chinese, Japanese and Korean. The README notes these are unofficial and may be inaccurate or out of date.
What people use it for
- Learning how Flexbox solves layout problems that were once hard with CSS alone
- Studying modern CSS layout with visual examples
- Editing the examples and seeing changes refresh instantly in the browser
- Using a quick visual reference while building a front-end layout
Frequently asked questions
Is solved-by-flexbox free to use?
The project is released under the MIT licence, as stated in the project information. You can read the licence file in the repository to see the full terms.
What do I need to install solved-by-flexbox?
The README says you need Node.js installed. You then clone the repository, run npm install, and run npm start.
How do I run solved-by-flexbox on a different port?
Pass the port number as an argument to npm start, for example npm start -- -p 8080. The README's default port is 4000.
Why won't npm start work?
The README does not include troubleshooting steps. Confirm Node.js and npm are installed, make sure npm install completed, and try a different port if 4000 is in use.
Is solved-by-flexbox a CSS library I can import?
No. The README describes it as a showcase of layout problems, not a library or ready-to-use UI kit. Use it as a learning reference.
Does solved-by-flexbox document the Flexbox API?
No. The README does not cover Flexbox API documentation, so use it for visual examples and a separate reference for property details.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Solved by Flexbox suits developers and students who want visual, runnable examples of layout problems solved with Flexbox. It is not a UI library and does not document the Flexbox API, so readers who need those should choose a different resource.
Install options & downloads