Tags: flexbox

How Flexbox works — explained with big, colorful, animated gifs [↗]

In this article, we’ll dive into the 5 most common Flexbox properties. We’ll explore what they do, how you can use them, and what their results will actually look like.

I’ve been using Flexbox more and more, but it’s still not embedded into my memory, so big, colourful, animated gifs are a definite help.

A Simple Use of CSS Grid [↗]

A quick guide to using CSS grid for a 2 column layout, includes flexbox fallback for unsupported browsers.

Understanding Flexbox: Everything you need to know [↗]

This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model. It’s a long one, so I hope you’re ready for it.

Very comprehensive.

Learn CSS Flexbox in 3 Minutes [↗]

In this post you’ll learn the most important concepts of the flexbox layout in CSS, which will make your life easier if you find yourself struggling with CSS layouts from time to time.

We’ll only focus on core principles, while leaving out stuff you shouldn’t care about until you’ve understood the basics.

A super simple introduction to using flexbox.

Don’t Overthink It (Flexbox) Grids [↗]

My point, again: it’s not required that you reach for a grid framework to build a grid. You can do it! This is also not to say that flexbox is trivially easy and you’ll never have any problems. There are plenty of edge cases and weird browser support things that you may run into if you start using more niche flexbox features. The stuff we looked at here is pretty vanilla though and I’d be surprised if you had problems.

Some good flexbox grid advice from Chris Coyier. Chris has a knack of breaking things down and keeping things simple, stupid.

Grid Layout & Flexbox City [↗]

CSS GRID LAYOUT is nearly finalized. Which means it’s time for designers and front-end developers to set the flags enabling their browsers to support the new specification, put CSS Flexbox through its paces by using it to create layouts, and see if anything breaks.

A rallying call from Zeldman to start using/adopting flexbox. Features a curated list of CSS Grid Layout and CSS Flexbox links.

Grd – A CSS grid framework using Flexbox [↗]

Another CSS grid framework, this one uses flexbox and is tiny at just 512 bytes (Gzipped). Some guy is not happy about its existence, but I think it’s good to have options. I also like the live demo, which is pretty nifty.

Flexbox Defense [↗]

Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS!

As a game, it’s not the best. As a learning tool for getting to grips with the CSS Flexible Box Layout Module, it’s pretty nifty!