{"id":21202,"date":"2013-04-18T03:05:55","date_gmt":"2013-04-18T10:05:55","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21202"},"modified":"2021-08-04T07:56:47","modified_gmt":"2021-08-04T14:56:47","slug":"flex-grow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-grow\/","title":{"rendered":"flex-grow"},"content":{"rendered":"\n<p>The <code>flex-grow<\/code> property is a sub-property of the <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">Flexible Box Layout module<\/a>.<\/p>\n\n\n\n<p>It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  flex-grow: 2;\n}<\/code><\/pre>\n\n\n\n<p>For example, if all items have <code>flex-grow<\/code> set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">flex-grow: &lt;number><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>The following demo shows how the remaining space is being calculated according to the different values of <code>flex-grow<\/code> (see on CodePen for better understanding).<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_9a9ad8fb040f5efaf4e749b49cae7281\" src=\"\/\/codepen.io\/anon\/embed\/9a9ad8fb040f5efaf4e749b49cae7281?height=450&amp;theme-id=1&amp;slug-hash=9a9ad8fb040f5efaf4e749b49cae7281&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 9a9ad8fb040f5efaf4e749b49cae7281\" title=\"CodePen Embed 9a9ad8fb040f5efaf4e749b49cae7281\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>All items have a <code>flex-grow<\/code> value of 1 except the 3rd one which has a <code>flex-grow<\/code> value of 2. It means when the available space is distributed, the 3rd flex-item will have twice as much space as others.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">10 <sup>1<\/sup><br>11<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">20+<\/td><td class=\"has-text-align-center\" data-align=\"center\">22-28 <sup>2<\/sup><br>29+<\/td><td class=\"has-text-align-center\" data-align=\"center\">7-8 <sup>2<\/sup><br>9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.1+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">iOS<\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Chrome Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Firefox Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\"><strong>Android<\/strong><\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">7-8.4 <sup>2<\/sup><br>9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">22-28 <sup>2<\/sup><br>29+<\/td><td class=\"has-text-align-center\" data-align=\"center\">90+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/td><td class=\"has-text-align-center\" data-align=\"center\"><abbr title=\"Technology Preview\">12.1+<\/abbr><\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=\"https:\/\/caniuse.com\/mdn-css_properties_flex-grow\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<ul><li><sup>1<\/sup> Uses the non-standard name <code>-ms-flex-positive<\/code><\/li><li><sup>2<\/sup> Supported with prefix <code>-webkit-<\/code><\/li><\/ul>\n\n\n\n<p>Blackberry browser 10+ supports the new syntax.<\/p>\n\n\n\n<p>For more informations about how to mix syntaxes in order to get the best browser support, please refer to <a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">&#8220;Using Flexbox&#8221;<\/a> or <a href=\"http:\/\/dev.opera.com\/articles\/view\/advanced-cross-browser-flexbox\/#fallbacks\" rel=\"noopener\">this article from DevOpera<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css3-flexbox\/#flex-grow\" rel=\"noopener\">flex-grow in the spec<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/flex-grow\" rel=\"noopener\">flex-grow at MDN<\/a><\/li><li><a href=\"http:\/\/dev.opera.com\/articles\/view\/advanced-cross-browser-flexbox\/#fallbacks\" rel=\"noopener\">Advanced cross-browser flexbox<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">A guide to Flexbox<\/a><\/li><\/ul>\n\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2020-11-10\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Oct 18, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/understanding-flex-grow-flex-shrink-and-flex-basis\/\">\n      Understanding flex-grow, flex-shrink, and flex-basis    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2015-12-26\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 10, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/flex-grow-is-weird\/\">\n      `flex-grow` is weird. Or is it?    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/mmatuzo\/\" aria-label=\"Author page of Manuel Matuzovic\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/fee3aee3642c55f15adfcbeab11e6bb6?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/fee3aee3642c55f15adfcbeab11e6bb6?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/mmatuzo\/\">\n      Manuel Matuzovic    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2013-02-18\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 15, 2013  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">\n      Using Flexbox: Mixing Old and New for the Best Browser Support    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2012-08-07\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 13, 2013  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/old-flexbox-and-new-flexbox\/\">\n      &#8220;Old&#8221; Flexbox and &#8220;New&#8221; Flexbox    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2019-07-01\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 1, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/making-width-and-flexible-items-play-nice-together\/\">\n      Making width and flexible items play nice together    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2021-06-10\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 22, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/equal-columns-with-flexbox-its-more-complicated-than-you-might-think\/\">\n      Equal Columns With Flexbox: It\u2019s More Complicated Than You Might Think    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/kevinpowell\/\" aria-label=\"Author page of Kevin Powell\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/3927862337dce65b8bbdbd977044389f?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/3927862337dce65b8bbdbd977044389f?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/kevinpowell\/\">\n      Kevin Powell    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-21202\">\n\n  <time datetime=\"2020-09-01\" title=\"Originally published Apr 18, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Aug 3, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/how-to-make-a-media-query-less-card-component\/\">\n      How to Make a Media Query-less responsive Card Component    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/flex-grow\/\" rel=\"tag\">flex-grow<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/flexbox\/\" rel=\"tag\">flexbox<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffreycrofte\/\" aria-label=\"Author page of Geoffrey Crofte\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/2017-geoffrey-crofte@2x.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffreycrofte\/\">\n      Geoffrey Crofte    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The flex-grow property is a sub-property of the Flexible Box Layout module. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. For example, if all [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","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":""},"tags":[6531,532],"acf":[],"jetpack-related-posts":[{"id":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21202,"position":0},"title":"A Complete Guide to Flexbox","date":"April 8, 2013","format":false,"excerpt":"Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.","rel":"","context":"In \"flexbox\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/guide-flexbox.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":13976,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex\/","url_meta":{"origin":21202,"position":1},"title":"flex","date":"August 31, 2011","format":false,"excerpt":"The flex property is a sub-property of the Flexible Box Layout module. This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional. Syntax flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] .flex-item { \/* this *\/ flex: 1 100px; \/*\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21256,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-shrink\/","url_meta":{"origin":21202,"position":2},"title":"flex-shrink","date":"April 19, 2013","format":false,"excerpt":"The flex-shrink property is a sub-property of the Flexible Box Layout module. It specifies the \"flex shrink factor\" which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row. .element { flex-shrink:\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21208,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/","url_meta":{"origin":21202,"position":3},"title":"align-self","date":"April 19, 2013","format":false,"excerpt":"The align-self property is a sub-property of the Flexible Box Layout module. It makes possible to override the align-items value for specific flex items. The align-self property accepts the same 5 values as the align-items: flex-start: cross-start margin edge of the item is placed on the cross-start line flex-end: cross-end\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21085,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-content\/","url_meta":{"origin":21202,"position":4},"title":"align-content","date":"April 17, 2013","format":false,"excerpt":"The\u00a0align-content\u00a0property is a sub-property of the\u00a0Flexible Box Layout module. It helps to align a flex container\u2019s lines within it when there is extra space in the cross-axis, similar to how\u00a0justify-content\u00a0aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The\u00a0align-content\u00a0property\u2026","rel":"","context":"In \"align-content\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":21202,"position":5},"title":"place-self","date":"March 2, 2021","format":false,"excerpt":"The place-self property in CSS is shorthand for the align-self and justify-self properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-self and justify-self (CSS Grid only) are values that align an individual item in the block and inline directions. .element { place-self: center start;\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21202"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"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=21202"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21202\/revisions"}],"predecessor-version":[{"id":346042,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21202\/revisions\/346042"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21202"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}