{"id":21095,"date":"2013-04-17T10:29:01","date_gmt":"2013-04-17T17:29:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21095"},"modified":"2021-08-04T08:52:40","modified_gmt":"2021-08-04T15:52:40","slug":"flex-flow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-flow\/","title":{"rendered":"flex-flow"},"content":{"rendered":"\n<p>The <code>flex-flow<\/code> property is a sub-property of the <a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//a-guide-to-flexbox///">Flexible Box Layout module<\/a>.\u00a0It is a shorthand for <code>flex-direction<\/code> and <code>flex-wrap<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  flex-flow: row wrap;\n}<\/code><\/pre>\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-flow: &lt;\u2018flex-direction\u2019> || &lt;\u2018flex-wrap>;<\/code><\/pre>\n\n\n\n<p>You can specify one or two values, no matter the order.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>Both lists behave in the exact same way:<\/p>\n\n\n\n<ul><li>The blue one has <code>flex-direction: row<\/code> and <code>flex-wrap: wrap<\/code><\/li><li>The red one has <code>flex-flow: row wrap<\/code><\/li><\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_b564d0898f43f2345991cded5d28b522\" src=https://css-tricks.com/"////codepen.io//anon//embed//b564d0898f43f2345991cded5d28b522?height=550&amp;theme-id=1&amp;slug-hash=b564d0898f43f2345991cded5d28b522&amp;default-tab=result\%22 height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed b564d0898f43f2345991cded5d28b522\" title=\"CodePen Embed b564d0898f43f2345991cded5d28b522\" 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\">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-48<sup> 2<\/sup><br>49+ <sup style=\"font-family: inherit;\">3<\/sup><span style=\"font-family: inherit; font-size: inherit;\"> <\/span><\/td><td class=\"has-text-align-center\" data-align=\"center\">21-28 <sup>4<\/sup><br>29+<\/td><td class=\"has-text-align-center\" data-align=\"center\">7-8 <sup>4<\/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>4<\/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://css-tricks.com/"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>-ms<\/code><\/li><li><sup>2<\/sup> Partial support<\/li><li><sup>3<\/sup> Supported with prefix <code>-moz-<\/code><\/li><li><sup>4<\/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/"https:////css-tricks.com//using-flexbox///">&#8220;Using Flexbox&#8221;<\/a> and <a href=https://css-tricks.com/"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=https://css-tricks.com/"http:////www.w3.org//TR//css3-flexbox//#flex-flow\" rel=\"noopener\">CSS Flexible Box Layout Module Level 1<\/a><\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//CSS//flex-flow/" rel=\"noopener\">MDN documentation<\/a><\/li><li><a href=https://css-tricks.com/"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/"https:////css-tricks.com//snippets//css//a-guide-to-flexbox///">A guide to Flexbox<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//using-flexbox///">Using Flexbox<\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//old-flexbox-and-new-flexbox///">Old Flexbox and new Flexbox<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The flex-flow property is a sub-property of the Flexible Box Layout module.\u00a0It is a shorthand for flex-direction and flex-wrap. Syntax [&hellip;]<\/p>\n","protected":false},"author":1888,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21095"}],"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\/1888"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21095"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21095\/revisions"}],"predecessor-version":[{"id":346101,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21095\/revisions\/346101"}],"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=21095"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}