this page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"It’s hard to sum up all the awesome that is flexbox in a little ol’ blog post. Although we gave it a shot here. Here, let’s just try and focus on one thing that flexbox solves very nicely: the ability to have an arbitrary set of boxes fill up all the available height of a […]<\/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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":333756,"url":"https:\/\/css-tricks.com\/exploring-the-complexities-of-width-and-height-in-css\/","url_meta":{"origin":161433,"position":0},"title":"Exploring the Complexities of Width and Height in CSS","date":"February 5, 2021","format":false,"excerpt":"The following article is co-authored by Uri Shaked and Michal Porag. Let\u2019s explore the complexities of how CSS computes the width and height dimensions of elements. This is based on countless late-night hours debugging and fiddling with lots of combinations of CSS properties, reading though the specs, and trying to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/steps.png?fit=875%2C656&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":181375,"url":"https:\/\/css-tricks.com\/centering-css-complete-guide\/","url_meta":{"origin":161433,"position":1},"title":"Centering in CSS: A Complete Guide","date":"September 2, 2014","format":false,"excerpt":"Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/09\/guide-centering.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":357565,"url":"https:\/\/css-tricks.com\/recreating-the-apple-music-hits-playlist-animation-in-css\/","url_meta":{"origin":161433,"position":2},"title":"Recreating the Apple Music Hits Playlist Animation in CSS","date":"November 29, 2021","format":false,"excerpt":"Apple Music has this \"Spatial Audio\" feature where the direction of the music in your headphones is based on the location of the device. It's tough to explain just how neat it is. But that's not what I'm here to talk about. I opened up the Apple Music app and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/apple-music-playlist-animation.gif?fit=976%2C500&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299018,"url":"https:\/\/css-tricks.com\/the-thought-process-behind-a-flexbox-layout\/","url_meta":{"origin":161433,"position":3},"title":"The Thought Process Behind a Flexbox Layout","date":"November 26, 2019","format":false,"excerpt":"I just need to put two boxes side-by-side and I hear flexbox is good at stuff like that. Just adding display: flex; to the parent element lays out the children in a row. Well, that's cool. I guess I could have floated them, but this is easier. They should probably\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/layouts-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338290,"url":"https:\/\/css-tricks.com\/float-an-element-to-the-bottom-corner\/","url_meta":{"origin":161433,"position":4},"title":"Float an Element to the Bottom Corner","date":"April 19, 2021","format":false,"excerpt":"Need to lay out an element to the right or the left, such that text wraps around it? That\u2019s an easy task for the float property. But what about if you also want to push that element (let\u2019s call it an image) to one of the bottom corners while we\u2019re\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304695,"url":"https:\/\/css-tricks.com\/animating-css-width-and-height-without-the-squish-effect\/","url_meta":{"origin":161433,"position":5},"title":"Animating CSS Width and Height Without the Squish Effect","date":"March 5, 2020","format":false,"excerpt":"The first rule of animating on the web: don't animate width and height. It forces the browser to recalculate a bunch of stuff and it's slow (or \"expensive\" as they say). If you can get away with it, animating any transform property is faster (and \"cheaper\"). Butttt, transform can be\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/9-slice.png?fit=1200%2C382&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\/161433"}],"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=161433"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/161433\/revisions"}],"predecessor-version":[{"id":238213,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/161433\/revisions\/238213"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=161433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=161433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=161433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}