It's 2021! Let's refresh Our Memory. Here's a Cheat Sheet of everything you can do with CSS flexbox to get started in 2021. CSS Flexbox 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 inside the flex-container MAIN AXIS align-content This property arranges flex-items along the inside the flex-container. This is similar to CROSS AXIS justify-content align-items Distributes Flex-items along the Cross Axis align-self flex - grow | shrink | wrap : grows the size of a flex-item based on width of the flex-container. flex-grow : The ability for a flex item to shrink based on width of the flex-container. Opposite of flex-grow. flex-shrink : Amount of Flex-item you want in a line/row. flex-wrap Short Hands : It is a shorthand to , and combined. flex flex-grow flex-shrink 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-basis Credits Conclusion Here's Your Medal For reading till the end ❤️ Suggestions & Criticisms Are Highly Appreciated ❤️ Youtube / Joy Shaheb Twitter / JoyShaheb Instagram / JoyShaheb Also published on: https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl

Instagram

Twitter

CSS FlexBox Cheat Sheets for Web Developers in 2021

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

The Ultimate CSS Grid Cheat Sheet in 2021🎖️

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

181 Stories To Learn About Css3

The Ultimate CSS Grid Cheat Sheet in 2021🎖️

100 Stories To Learn About Html5

12 Websites to Take Your CSS Skills From Beginner to Pro

21 Valuable HTML & CSS Code Snippets for Web Developers

20 Best Free HTML5, CSS3, Bootstrap Landing Page Templates in 2018

181 Stories To Learn About Css3

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps