{"id":21263,"date":"2013-04-19T08:40:20","date_gmt":"2013-04-19T15:40:20","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21263"},"modified":"2022-09-30T08:34:01","modified_gmt":"2022-09-30T15:34:01","slug":"flex-basis","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-basis\/","title":{"rendered":"flex-basis"},"content":{"rendered":"\n<p>The <code>flex-basis<\/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>. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the <code>flex<\/code> shorthand, its specified value is the length zero.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  flex-basis: 100px;\n}<\/code><\/pre>\n\n\n\n<p>A flex-basis value set to <code>auto<\/code> sizes the element according to its size property (which can itself be the keyword <code>auto<\/code>, which sizes the element based on its contents).<\/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-basis: &lt;number><\/code><\/pre>\n\n\n\n<p>Please note that as for any width, negative lengths are invalid.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_58ccdf09053da058e85c442cb93b0c6c\" src=\"\/\/codepen.io\/anon\/embed\/58ccdf09053da058e85c442cb93b0c6c?height=150&amp;theme-id=1&amp;slug-hash=58ccdf09053da058e85c442cb93b0c6c&amp;default-tab=result\" height=\"150\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 58ccdf09053da058e85c442cb93b0c6c\" title=\"CodePen Embed 58ccdf09053da058e85c442cb93b0c6c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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\">11<\/td><td class=\"has-text-align-center\" data-align=\"center\">12+<\/td><td class=\"has-text-align-center\" data-align=\"center\">22+<\/td><td class=\"has-text-align-center\" data-align=\"center\">22-28 <sup>1<\/sup><br>29+<\/td><td class=\"has-text-align-center\" data-align=\"center\">7-8 <sup>1<\/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<br>Safari<\/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> Browser<\/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>1<\/sup><br>9+<\/td><td class=\"has-text-align-center\" data-align=\"center\">92+<\/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> Supported with prefix <code>-webkit-<\/code><\/li><\/ul>\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> and <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-basis\" rel=\"noopener\">CSS Flexible Box Layout Module Level 1<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/flex-basis\" rel=\"noopener\">MDN documentation<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">CSS-Tricks Flexbox Guide<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-posts\">Related posts<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-21263\">\n\n  <time datetime=\"2020-11-10\" title=\"Originally published Apr 19, 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  \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-21263\">\n\n  <time datetime=\"2015-12-26\" title=\"Originally published Apr 19, 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  \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-21263\">\n\n  <time datetime=\"2019-11-26\" title=\"Originally published Apr 19, 2013\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 3, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/the-thought-process-behind-a-flexbox-layout\/\">\n      The Thought Process Behind a Flexbox Layout    <\/a>\n  <\/h3>\n\n  \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-21263\">\n\n  <time datetime=\"2021-06-10\" title=\"Originally published Apr 19, 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  \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-21263\">\n\n  <time datetime=\"2020-09-01\" title=\"Originally published Apr 19, 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  \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-basis property is a sub-property of the Flexible Box Layout module. It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero. A flex-basis value set to auto sizes the element according [&hellip;]<\/p>\n","protected":false},"author":248367,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","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":[],"acf":[],"jetpack-related-posts":[{"id":13976,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex\/","url_meta":{"origin":21263,"position":0},"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":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21263,"position":1},"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":21256,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-shrink\/","url_meta":{"origin":21263,"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":335691,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/place-self\/","url_meta":{"origin":21263,"position":3},"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":[]},{"id":21208,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-self\/","url_meta":{"origin":21263,"position":4},"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":21202,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-grow\/","url_meta":{"origin":21263,"position":5},"title":"flex-grow","date":"April 18, 2013","format":false,"excerpt":"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\u2026","rel":"","context":"In \"flex-grow\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21263"}],"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\/248367"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21263"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21263\/revisions"}],"predecessor-version":[{"id":374023,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21263\/revisions\/374023"}],"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=21263"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}