The Complete Guide to Flexbox<\/a> for reference.<\/p>\n","protected":false},"excerpt":{"rendered":"Every day at Shopify I speak with Partners who are constantly pushing the boundaries of what’s possible in ecommerce design. Recently, I’ve noticed a number of designers are experimenting with Flexbox in their stores. As web designers and developers, one of our primary goals is to bring focus to content and make it easy for […]<\/p>\n","protected":false},"author":247889,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[1150,1151],"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":236836,"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":236836,"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":144099,"url":"https:\/\/css-tricks.com\/does-flexbox-have-a-performance-problem\/","url_meta":{"origin":236836,"position":2},"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":[]},{"id":151281,"url":"https:\/\/css-tricks.com\/solved-flexbox\/","url_meta":{"origin":236836,"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":188502,"url":"https:\/\/css-tricks.com\/flexbox-nav-bar-fixed-variable-take-rest-elements\/","url_meta":{"origin":236836,"position":4},"title":"Flexbox Nav Bar with Fixed, Variable, and Take-Up-The-Rest Elements","date":"November 17, 2014","format":false,"excerpt":"a CSS-Tricks reader wrote to me with a layout question. A variety of elements need to be arranged in a horizontal bar. Some of fixed size, some vary, and one needs to take up the rest of the space. Flexbox is beautifully suited for this, so I explain with that.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305346,"url":"https:\/\/css-tricks.com\/flexbox-and-absolute-positioning\/","url_meta":{"origin":236836,"position":5},"title":"Flexbox and absolute positioning","date":"March 18, 2020","format":false,"excerpt":"Chen Hui Jing notes that when you absolutely position a flex item, it's no longer part of the flex layout. Except... it kinda is a little bit. If you make the child position: absolute; but don't apply any top\/right\/bottom\/left properties, then flexbox alignment will still apply to it. It's odd\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/chenhuijing-mental-model.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/236836"}],"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\/247889"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=236836"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/236836\/revisions"}],"predecessor-version":[{"id":251860,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/236836\/revisions\/251860"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=236836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=236836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=236836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}