Over the past month I’ve had a coupleÂ of unique problems in theÂ web development world. It has been awhile since I’ve been able to come up with some out of the box solutions. Luckily for me CSS has come a long way and I was able to accomplish my problems using flexbox. Here are two of my codepens that have the details:
Flexbox Fluid Rows with Dynamic Height using Flexbox
Fixed header and footer without fixed position using Flexbox
Content div with an inner dynamic header and scrollable content using Flexbox
Flexbox is not widely used but is supported pretty well in any modern browsers. So I figured I would help spread the word about flexbox and provide the resources I found most useful.
Using CSS flexible boxesÂ – This is a good starting resource. It goes into a lot of technical details about the flexbox model. It gives everything from concepts to real world examples.
A complete guide to FlexboxÂ – I found this link to be the most helpful. It arranges the information in an easy to see way. It gives plenty of examples on how to use the flexbox model to achieve various layout scenarios.
Can I use Flexbox Layout ModuleÂ – This is a good resource to see if the browsers you are developing for supports the flexbox model.