geoffreycrofte / flexbox.ninja

Demonstration content of Flexbox.ninja website. See https://flexbox.ninja/

Flexbox.ninja

Flexbox.ninja is a website made and hosted by Geoffrey Crofte to help you better understand CSS Flexbox Layout Module.

How to contribute

The fact that those demonstration folders are available on Github is because you are very welcome to contribute to show how you use Flexbox to solve CSS issue, advanced layout or even little CSS tricks.

Pick one of the folder as example. All I need to run your demo is:

• 1 index.html file containing the explanation of your code.
• 1 demo.html file containing the entire independant demonstration of your code. Feel free to do whatever you want in that file.
• 3 images named [nice-name]-big.png (1086×648), [nice-name].png (362×226) and [nice-name].svg (362×226). If you don't know how to “iconified” your demo, leave those empty, I'll work on it for you.

Drop your name and your URL on your demo, I'll arrange the footer for you, because mentions are due.

Roadmap

Some ideas are already on my to-do list. Among those:

• Vertical-Align Content
• Flexible Sidebar
• Stepper Input
• Card Group
• Flexible Gallery (Masonry)
• Grid Gallery

If you've got any idea or need, contact me on Twitter.

Website Next Steps

The Website is a PWA. This step is finally done. The next step will be better handling the cache for offline usage. You can already visit the demos when you ar offline, if you visited those been online.

flexbox.ninja's Issues

More resources

Great work! Looking forward to see more examples. I think the resources section can benefit from these websites as well:

• Solved by flexbox, a list of common problems that flexbox resolve.
• Fluxbugs, a list of common flexbox bugs on different browsers and how can they be resolved