solved-by-flexbox README

The project's README from github.com/philipwalton/solved-by-flexbox. As one markdown file: README.md.

Solved by Flexbox

A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.

View Site

Viewing the Site Locally

The Solved by Flexbox site can be built with Node.js. If you have Node.js installed on your system, you can run the following commands to build and serve a local copy.

# Clone the git repository and cd into the cloned directory.
git clone https://github.com/philipwalton/solved-by-flexbox.git
cd solved-by-flexbox

# Install the dependencies
npm install

# Build and serve the site at http://localhost:4000
npm start

This starts up a local server on port 4000. To view the site in your browser, navigate to http://localhost:4000. If you want to use a different port, you can pass the port number as an argument to npm start:

npm start -- -p 8080

In addition to building the site and serving it locally, this will also listen for any changes and rebuild the site as needed. This allows you to play around with the code, refresh the browser, and see your changes instantly.

Translations

The following translations have been graciously provided by the community:

Please note that translations are unofficial and may be inaccurate or out of date. To submit your own translation, please submit a pull request or open an issue and link to your translated content.

solved-by-flexbox (philipwalton/solved-by-flexbox)

korean
Searching Database…

12.9K ·GitHub
Solved-by-flexbox
What is this?A showcase site demonstrating CSS layout problems that used to be hard or impossible with plain CSS, and showing how Flexbox solves them trivially.
Is this a library or just a reference site?It's a static reference website with examples and code snippets, not a library or framework you install into a project.
How do I view the examples or run the site locally?Build and serve it locally with Node.js using the included Gulp scripts, e.g. npm start, which serves the site on port 4000 and rebuilds on changes.
Do I need anything besides Node.js to build it?Just Node.js; the project uses Gulp (via npm scripts) to build and serve the site.
Is the site content actively maintained?Not stated explicitly, but the repo is old (created 2013) and translations are community-provided and may be outdated, suggesting the main content isn't actively updated either.
Who is this useful for?Frontend developers who want quick, copy-paste CSS Flexbox solutions for common layout problems like centering, equal-height columns, or sticky footers.
Is this available in languages other than English?Yes, community members have provided unofficial Chinese, Japanese, and Korean translations, though they may be outdated.
How is the site deployed?There's a deploy npm script that builds the site in production mode using Gulp and clears the old build folder first.
What are similar projects?css-protips, awesome-angular, Web, iCSS, youmightnotneedjquery, flexbugs, Skeleton, content
Which topics is it in?showcase, flexbox, korean, japanese, static-site, responsive, frontend-framework, reference, css, guide, html, learning
Creator
philipwalton
Size
2 MB
Stars
12.9K
Updated
CommitDec 03
Age
13y
Commits · 90 Days