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.
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.)
Each lane is just an CSS Flex container with styled items.
It was animated using jQuery
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
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.
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.
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.