CSS FlexBox Cheat Sheets for Web Developers in 2021
CSS FlexBox Cheat Sheets for Web Developers in 2021: 1,022 reads. Cheat Sheet of everything you can do with CSS flexbox to get started in 2021. It's 2021! Let's refresh Our CSS Flexbox Memory. We refresh our Flexbox memory. Here's a Cheat sheet of everything we can't do with flexbox. It is a shorthand to flex-grow, flex-shrink and flex-basis combined. Flex-wrap: Amount of Flex-item you want in a line/row.
Front end Developer 🔥 || Youtuber 🎬|| Blogger ✍|| K-pop fan ❤️️based in Dhaka, Bangladesh.
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 Chart --
The Direction/Orientation in which flex-items are distributed inside flex-container.
This property arranges flex-items along the MAIN AXIS inside the flex-container
This property arranges flex-items along the CROSS AXIS inside the flex-container. This is similar to justify-content
Distributes Flex-items along the Cross Axis
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.
- 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.
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
Join Hacker Noon
Create your free account to unlock your custom reading experience.