FlexBox Cheat Sheets in 2021 || CSS 2021

Featured on Hashnode

Table of Contents --

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

Flex Box model Architecture

FlexBox Chart --

Flex Box property Value Chart

flex-direction

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

Flex Direction

Flex Direction

justify-content

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

justify content

justify content

align-content

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

align content

align content

align-items

Distributes Flex-items along the Cross Axis

align items

align-self

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.

flex grow flex shrink flex wrap

flex wrap flex grow flex shrink

Short Hands

Alt Text

  • 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 flex basis

Credits

Credits

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❤️

Alt Text

Alt Text

Tapas Adhikary's photo

Joy Shaheb, Great article. Thanks for sharing. Bookmarked.

Joy Shaheb's photo

Most Welcome ❤️

Sandeep Panda's photo

Very interesting use of graphics. Well explained - keep it up!

Joy Shaheb's photo

Thank you so much for the love & support ❤️

Luiz Filipe da Silva's photo

Well explained and easy to understand. Good job!

Joy Shaheb's photo

Thank You for the love & support ❤️

Nuruddin Shohan's photo

Glad to see a Bangladeshi blogger on the platform!

Joy Shaheb's photo

Thank You Bhaiya for the love & support ❤️