Tag Archives: Flexbox

A Complete Guide to Flexbox


via A Complete Guide to Flexbox | CSS-Tricks.

Background

Basics & Terminology

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback


Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback

After I’ve published the post on how I had implemented responsive equal height blocks into Readerrr, I received some useful feedback from the community. Daniel Sturm suggested using CSS3’s Flexbox rather than JavaScript, and Veerle Pieters tweeted “<…> you could do with Flexbox & use this as JS fallback”. Exactly! How did I not think of that at all?! I’ve read several articles about Flexbox before but never tried it myself, therefore this thing totally went out of my head.

Why Flexbox? In short, the Flexbox Layout module was designed to solve problems exactly like this. It is an efficient and flexible way to manage probably all types of layouts. It provides almost no time gap between initially wrong and correctly laid out layout look. In JavaScript solution case it takes time to download the document, then to download the corresponding JS file, and, if there are any, download images in the blocks. Flexbox is instant and JavaScript takes seconds. Even so, this JavaScript case is perfect for people who use older browsers that do not support Flexbox.