DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for CSS Flex Explained in 1 Animation
Code Something
Code Something

Posted on

CSS Flex Explained in 1 Animation

A picture is worth a thousand words!

How many an animation?

Today I have this simple write-up. It explains how justify-content property works in CSS flex. So techincally it's not all of flex. But it does capture a large chunk of its functionality.

CSS Flex justify-content animation

There is a lot you can learn about flex just from watching this animation. I think spacing items is at the core of Flex functionality. So I made this animation to demonstrate that.

Note this won't work when flex-wrap: wrap is applied, as it will create a line break once the content no longer fits on one row. (Not shown here.)

How It Was Made

Each lane is just an CSS Flex container with styled items.
It was animated using jQuery .animation() with easeOutBounce effect.

CSS animation could have been used here, but jQuery animation uses a better bounce effect that would be too time consuming to recreate using beizer curve or CSS's @keyframes directive.

I recorded the video with OBS Studio which you can see in my tweet.

The GIF animation in this tutorial was created using ScreenToGif software.

I took a deep dive into CSS after writing my book CSS Visual Dictionary.

#Octopack is my coding book bundle.

Hey readers! At the end of each tutorial I advertise my coding book bundle. I don't know if it's going to work as I don't really do marketing well. But I decided to follow this protocol just to see what happens.

The pack includes CSS Dictionary, JavaScript Grammar, Python Grammar and few others. Just see if you might need any of the books based on where you are on your coding journey! Most of my books are for beginners-intermediate XP.

I don't know who is reading my tutorials but I put together this coding book bundle that contains some of the best books I've written over the years. Check it out πŸ™‚ I reduced price to some regions like India, Nigeria, Cairo and few others. Prices are just so different here in the U.S. and all over the world.

You can get Octopack by following my My Coding Books link.

css book

css flex diagram

Top comments (1)

Collapse
geraldruder profile image
GeraldRuder

Animations are fun to use and implement in your web project. In advanced CSS, can we use flexbox for animation purposes ? Love spells that work for free instantly

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.