CSS Flex Explained in 1 Animation

A picture is worth a thousand words!

How many an animation?

CSS Flex justify-content property (animated)

Check out these coding book discounts for Medium readers:

Follow me on Twitter 101K where I post all things JavaScript

How It Was Made

Each lane is just an CSS Flex container with styled items.

I usually don’t recommend using jQuery because modern day frameworks and libraries offer better functionality. However, when I need to animate HTML elements — specifically for small-scale projects and experiments — it gives you highest quality animation while writing less code.

(CSS animations take longer to write than same code with jQuery.animate. Also jQuery UI has arguably better-looking animation easing effects.)

Flex was animated using jQuery .animation() with easeOutBounce effect inside JavaScript’s native setTimeout callback function.

jQuery allows chained animations as in: .animate({}).animate({})

Each animation will play in progression after the previous one completes.

Here’s the source code:

window.flex = setTimeout(e => {
    jQuery('#flex').animate({width: '550px'}, 2000…