{"id":157108,"date":"2013-11-25T16:21:34","date_gmt":"2013-11-25T23:21:34","guid":{"rendered":"http:\/\/css-tricks.com\/?p=157108"},"modified":"2013-11-25T16:21:34","modified_gmt":"2013-11-25T23:21:34","slug":"flexbox-cheat-sheet","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/flexbox-cheat-sheet\/","title":{"rendered":"Flexbox Cheat Sheet"},"content":{"rendered":"

Sean Fioritto<\/a> has some great flexbox content lately with this cheat sheet and this fun interactive video thingy<\/a>.<\/p>\n

If you can’t get enough flexbox, there is a new video by Ryan Seddon<\/a> on it and Solved by Flexbox<\/a> by Philip Walton is loaded with real-world-y examples.<\/p>\n","protected":false},"excerpt":{"rendered":"

Sean Fioritto has some great flexbox content lately with this cheat sheet and this fun interactive video thingy. If you can’t get enough flexbox, there is a new video by Ryan Seddon on it and Solved by Flexbox by Philip Walton is loaded with real-world-y examples.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":314446,"url":"https:\/\/css-tricks.com\/grid-for-layout-flexbox-for-components\/","url_meta":{"origin":157108,"position":0},"title":"Grid for layout, flexbox for components","date":"June 25, 2020","format":false,"excerpt":"When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016: Flexbox is essentially for laying out items in a single dimension \u2013 in a row OR a column. Grid is for layout of items in two\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/grid-vs-flexbox.png?fit=1200%2C592&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":152326,"url":"https:\/\/css-tricks.com\/flexbox-layout-isnt-slow\/","url_meta":{"origin":157108,"position":1},"title":"Flexbox layout isn’t slow","date":"October 8, 2013","format":false,"excerpt":"As a follow up to this conversation, Paul Irish shows us: Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex). And remember kids: tools, not rules.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":265204,"url":"https:\/\/css-tricks.com\/new-flexbox-guides-mdn\/","url_meta":{"origin":157108,"position":2},"title":"New flexbox guides on MDN","date":"January 12, 2018","format":false,"excerpt":"MDN released a comprehensive guide to Flexbox with new and updated materials by Rachel Andrew. The guide includes 11 posts demonstrating layouts, use cases and everything you could possibly want or need to know on the topic. All of the related Flexbox properties are nicely and conveniently attached to the\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":151281,"url":"https:\/\/css-tricks.com\/solved-flexbox\/","url_meta":{"origin":157108,"position":3},"title":"Solved by Flexbox","date":"September 26, 2013","format":false,"excerpt":"Philip Walton looks at common CSS layout issues that were a pain in the butt before Flexbox.","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":17685,"url":"https:\/\/css-tricks.com\/old-flexbox-and-new-flexbox\/","url_meta":{"origin":157108,"position":4},"title":"“Old” Flexbox and “New” Flexbox","date":"August 7, 2012","format":false,"excerpt":"Just so everyone is clear on this: \"Flexbox\" (more specifically: CSS Flexible Box Layout Module) has undergone a lot of changes in the last three years. Changes both to the spec and what browsers have implemented. How To Tell If you Google around about Flexbox, you will find lots of\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":144099,"url":"https:\/\/css-tricks.com\/does-flexbox-have-a-performance-problem\/","url_meta":{"origin":157108,"position":5},"title":"Does Flexbox Have a Performance Problem?","date":"July 22, 2013","format":false,"excerpt":"Wilson Page wrote a really great article for Smashing Magazine digging into a real world website and all the cool modern tools and techniques he and his team used to build it. For layout, they initially chose flexbox, but... As the app began to grow, we found performance was getting\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/157108"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=157108"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/157108\/revisions"}],"predecessor-version":[{"id":157110,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/157108\/revisions\/157110"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=157108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=157108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=157108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}