--- title: FlexBox Cheat Sheets in 2021 || CSS 2021 | daily.dev description: Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's refresh Our CSS Flexbox Memory. The Flexbox architecture work? The flex-items... canonical: https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: FlexBox Cheat Sheets in 2021 || CSS 2021 | daily.dev og:description: Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's refresh Our CSS Flexbox Memory. The Flexbox architecture work? The flex-items... og:url: https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt og:image: https://api.daily.dev/og/posts/aBGPtqLxt.png og:image:alt: FlexBox Cheat Sheets in 2021 || CSS 2021 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # FlexBox Cheat Sheets in 2021 || CSS 2021 **[DEV](https://daily.dev/sources/devto)** · [@joyshaheb](https://daily.dev/joyshaheb) · 6 min read · 153 upvotes · 15 comments ## Summary Here's a Tutorial & Cheat Sheet of everything you can do with CSS flexbox. Let's refresh Our CSS Flexbox Memory. The Flexbox architecture work? The flex-items are distributed along the Main Axis and Cross Axis. And, depending on the flex-direction property, the layout position changes between rows and columns. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@jatinrao** · 4 upvotes > It's Awesome Cheatsheet 😍 **@hamatoyogi** · 2 upvotes > Nice post! **@novalight** · 2 upvotes > Make FlexBox very easy to understand **@alfreddagenais** · 2 upvotes > Wow, very simple to understand with pictures!! 😍 Finally, I'll get all info easily with flexbox! Thank **@suhanw** · 2 upvotes > 💪🏻♥️ --- Tags: [#css](https://daily.dev/tags/css), [#containers](https://daily.dev/tags/containers) [View this post on daily.dev](https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"FlexBox Cheat Sheets in 2021 || CSS 2021","url":"https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt"},"datePublished":"2021-01-10T21:15:12.121Z","dateModified":"2021-10-07T14:17:10.317Z","description":"Here's a Tutorial \u0026 Cheat Sheet of everything you can do with CSS flexbox. Let's refresh Our CSS Flexbox Memory. The Flexbox architecture work? The flex-items...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d260ffd3cf8a388da0fc3bc4ff41b9ca","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/d260ffd3cf8a388da0fc3bc4ff41b9ca","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Khondokor Alam","url":"https://daily.dev/joyshaheb","image":"https://avatars2.githubusercontent.com/u/61899866?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":440}},"commentCount":15,"discussionUrl":"https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":153},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":15}],"keywords":"css,containers","timeRequired":"PT6M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"FlexBox Cheat Sheets in 2021 || CSS 2021"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/flexbox-cheat-sheets-in-2021-css-2021-abgptqlxt","comment":[{"@type":"Comment","text":"It’s Awesome Cheatsheet 😍","datePublished":"2021-01-13T06:51:03.111Z","url":"https://daily.dev/posts/aBGPtqLxt#c-fUbyPV03D","author":{"@type":"Person","name":"Jatin Rao","url":"https://daily.dev/jatinrao","image":"https://avatars3.githubusercontent.com/u/56562571?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Nice post!","datePublished":"2021-01-17T06:47:28.861Z","url":"https://daily.dev/posts/aBGPtqLxt#c-GcEyYnDpJ","author":{"@type":"Person","name":"Yoav Ganbar","url":"https://daily.dev/hamatoyogi","image":"https://avatars0.githubusercontent.com/u/6682981?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Make FlexBox very easy to understand","datePublished":"2021-01-11T16:07:44.004Z","url":"https://daily.dev/posts/aBGPtqLxt#c-B7zJyIGps","author":{"@type":"Person","name":"Joshua Segura","url":"https://daily.dev/novalight","image":"https://media.daily.dev/image/upload/f_auto/v1604762902/avatars/cCCjyhz89"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Wow, very simple to understand with pictures!! 😍 Finally, I’ll get all info easily with flexbox! Thank","datePublished":"2021-01-11T10:48:42.884Z","url":"https://daily.dev/posts/aBGPtqLxt#c-sbVs_KL9k","author":{"@type":"Person","name":"Alfred Dagenais","url":"https://daily.dev/alfreddagenais","image":"https://avatars1.githubusercontent.com/u/5769264?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"💪🏻♥️","datePublished":"2021-01-13T02:16:56.650Z","url":"https://daily.dev/posts/aBGPtqLxt#c-uYbkjVyyP","author":{"@type":"Person","name":"Suhan Wijaya","url":"https://daily.dev/suhanw","image":"https://avatars1.githubusercontent.com/u/27381522?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} ```