Flexbox Resources

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.

Facebook comments:

Fedil

I was originally born in Missouri, but traveled around most of my childhood. My mom finally got tired of moving while we were in Dallas, Texas and I have been here ever since.
After high school I started college at the University of North Texas (UNT) and started working in the computer field. I currently work for JCPenney as a front end software engineer for their e-commerce website. Before this I worked for AT&T about 12 years and started with them in 1999 (when they were Southwestern Bell).
I have many passions and I really love photography. Besides photography I also love sports. I not only like to watch it, but I also love to play. Currently my friends and I play indoor soccer and flag football.

Leave a Reply

Your email address will not be published. Required fields are marked *