{"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\/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=\"\/\/codepen.io\/anon\/embed\/b564d0898f43f2345991cded5d28b522?height=550&amp;theme-id=1&amp;slug-hash=b564d0898f43f2345991cded5d28b522&amp;default-tab=result\" 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:\/\/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\/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-flow\" rel=\"noopener\">CSS Flexible Box Layout Module Level 1<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/flex-flow\" rel=\"noopener\">MDN documentation<\/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><li><a href=\"https:\/\/css-tricks.com\/using-flexbox\/\">Using Flexbox<\/a><\/li><li><a href=\"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 You can specify one or two values, no matter the order. Demo Both lists behave in the exact same way: The blue one has flex-direction: row and flex-wrap: wrap The red one has flex-flow: row [&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":{"_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":21059,"url":"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/","url_meta":{"origin":21095,"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":21097,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-wrap\/","url_meta":{"origin":21095,"position":1},"title":"flex-wrap","date":"April 17, 2013","format":false,"excerpt":"The flex-wrap property is a sub-property of the Flexible Box Layout Module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in,\u2026","rel":"","context":"With 32 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13976,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex\/","url_meta":{"origin":21095,"position":2},"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":21092,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-direction\/","url_meta":{"origin":21095,"position":3},"title":"flex-direction","date":"April 17, 2013","format":false,"excerpt":"The flex-direction property is a sub-property of the Flexible Box Layout module. It establishes the main-axis, thus defining the direction flex items are placed in the flex container. .element { flex-direction: column-reverse; } Reminder: the main axis of a flex container is the primary axis along which flex items are\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21073,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/align-items\/","url_meta":{"origin":21095,"position":4},"title":"align-items","date":"April 11, 2013","format":false,"excerpt":"The align-items property is related to CSS layout. It effects how elements are aligned both in Flexbox and Grid layouts. .container { display: flex; align-items: flex-start; } align-items in Flexboxalign-items in Grid Syntax align-items: flex-start | flex-end | center | baseline | stretch The align-items property defines the default behavior\u2026","rel":"","context":"With 6 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":21095,"position":5},"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":[]}],"_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}]}}