Table of Contents --
- FlexBox Architecture
- flex-direction
- justify-content
- align-content
- align-items
- align-self
- flex - grow | shrink | wrap
- Short Hands
- Conclusion
It's 2021! Let's refresh Our CSS Flexbox Memory. Here's a Cheat Sheet of everything you can do with CSS flexbox to get started in 2021.
FlexBox Architecture
FlexBox Chart --
flex-direction
The Direction/Orientation in which flex-items are distributed inside flex-container.
justify-content
This property arranges flex-items along the MAIN AXIS inside the flex-container
align-content
This property arranges flex-items along the CROSS AXIS inside the flex-container. This is similar to justify-content
align-items
Distributes Flex-items along the Cross Axis
align-self
flex - grow | shrink | wrap
- flex-grow : grows the size of a flex-item based on width of the flex-container.
- flex-shrink : The ability for a flex item to shrink based on width of the flex-container. Opposite of flex-grow.
- flex-wrap : Amount of Flex-item you want in a line/row.
Short Hands
- flex : It is a shorthand to flex-grow, flex-shrink and flex-basis combined.
- flex-basis : This is similar to adding width to a flex-item, but only more flexible. flex-basis: 10em; it will set the initial size of a flex-item to 10em. Its final size will be based on available space, flex-grow, and flex-shrink.
- flex-flow : Short hand to flex-direction & flex-wrap
Credits
Read Next :
Conclusion
Here's Your Medal For reading till the end ❤️
Suggestions & Criticisms Are Highly Appreciated ❤️
YouTube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb
Discussion
This tool is awesome. Makes flexbox easy to understand. I use it alot.
demos.scotch.io/visual-guide-to-cs...
A legend made this software, thank you for sharing this 🏅🙏
Nice. This is also a good one: progressivered.com/fla/?d=0&v=1&h=...
This is also good for beginners to see how common components can be structured. flexboxpatterns.com/
Wow, that's a really good resource. Thank you for sharing.
Most welcome ❤️
Thanks
Niiiice!
Why not this is a PWA?
nice visuals, may I ask what you used? 👀
I took Images from Flaticon.com
I gave them credits before conclusion part
Awesome, thanks! 🙏❤
Can you please tell me whats the name of icons pack you used? I am a member at Flaticon, I liked the icons you used.
Thank you for sharing this.
Most welcome ❤️
Thank you sir... that's cool..but could I download or save it offline?? Bcz I have some Net issues
Sure,
How could I download it offline?
Click on the image. Then download/save it/ take screenshots
Awesome reference. Thanks for this!
Dear Joy Shaheb， may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.
Sure. Best of luck ❤️🎖️
Thank You Very Much！
pretty cool!
Thank you ❤️
Really good job! Thank you. It would be amazing if you could do something similar about Grids 😊
Thank you for the well wishes. I'll think about Grids in future. Till then, stay tuned ❤️
Nice cheat.
Nice chat.
Nice cat.
This is epic man 🤣🤣
Take medals 🏅🏅
Is there a similar cheat sheet like this but for CSS Grid?
Will make it in the future if possible. Till then, stay tuned ❤️🏅
Thanks for that! I love flex box but sometimes I hate it as well. But this cheat sheet gets a nice overview and hopefully reduces by frustration in the future.
Most welcome Felix,
You can follow me along if you're interested to get more contents like these in future.
Why we use flexbox or grid? What do you think of this?
Both of them are different type of Architecture. & they have the ability to produce the same results. It totally depends on the developer which architecture he/she likes to follow.
Thanks for sharing. This is an awesome resource!
Nice presentation
Nice pics but what about
justify-self? What aboutgapthat already works in every new browser except Safari? What about basics likeflex-basis?Perhaps I miss the purpose here.
nice tutorial
Amazing😁
Useful article.
Thank you so much for sharing this wonderful resource.
Most welcome. In future , I'm planning to create a cheat sheet for CSS Grid model as well, Till then , stay tuned & take care ❤️
Sir, You have a talent I have never seen! Tysm :) I know can flex that i know how to use display: flex 😉
Thank you soo much for the well wishes. ❤️❤️🏅
Excellent article!
Great article. Thanks for sharing.
Well explained!
Thank you ❤️
Wow, very simple to understand with pictures!! 😍 Finally, I'll get all info easily with flexbox! Thank
Most welcome ❤️
Thanks!
Most welcome ❤️
Nice article. The little trick if you want to center an object (X and Y) in 2 lines :
display: grid;
place-items: center;
Great effort, thanks Joy, very useful!
Most welcome ❤️
ty alot for the heads up. thats going to my pinwall.
Most welcome ❤️
Great work 🤩 thank you so much 👍
Most welcome ❤️
I've also found this useful for some of those pesky older browser flex bugs. github.com/philipwalton/flexbugs