Hackernoon logoCSS FlexBox Cheat Sheets for Web Developers in 2021 by@joyshaheb

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.
image
Joy Shaheb Hacker Noon profile picture

Joy Shaheb

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 Architecture

image

Flexbox Chart --

image

flex-direction

The Direction/Orientation in which flex-items are distributed inside flex-container.

image
image

justify-content

This property arranges flex-items along the MAIN AXIS inside the flex-container

image
image

align-content

This property arranges flex-items along the CROSS AXIS inside the flex-container. This is similar to justify-content

image
image

align-items

Distributes Flex-items along the Cross Axis

image

align-self

image

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.
image
image

Short Hands

image
  • flex : It is a shorthand to flex-growflex-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.
image

Credits

image

Conclusion

Here's Your Medal For reading till the end ❤️

Suggestions & Criticisms Are Highly Appreciated ❤️

image
image

Youtube / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

Also published on: https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl

Joy Shaheb Hacker Noon profile picture
by Joy Shaheb @joyshaheb. Front end Developer 🔥 || Youtuber 🎬|| Blogger ✍|| K-pop fan ❤️️based in Dhaka, Bangladesh.Read my stories

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.