{"id":21578,"date":"2018-11-30T13:28:21","date_gmt":"2018-11-30T13:28:21","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/"},"modified":"2023-01-31T15:40:48","modified_gmt":"2023-01-31T15:40:48","slug":"an-introduction-to-css-flex-and-browser-compatibility-part-1","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/","title":{"rendered":"An Introduction to CSS Flex and Browser Compatibility (Part 1)"},"content":{"rendered":"<div class=\"entry-content\"><p>Without a doubt, Flex is one of the best advancements to CSS in the past decade. Flex marks an imperative milestone to CSS and the advantages of using this layout technology over the trivial method of floats and positioning is uncanny.<\/p>\n<p>So long to the days of tricky responsive hackery to get your website to reorder rendered HTML as with Flex, it\u2019s a breeze. But this isn\u2019t all the technology has to offer; you have complete control over your Flex items, meaning if you want to reverse or even change the direction of your elements you can easily.<\/p>\n<h2>CSS Flex compatibility<\/h2>\n<p>It feels there\u2019s been a shadow cast over Flex amongst a lot of \u2018old-school\u2019 developers with the argument being that it is not widely supported across all modern browsers. But let\u2019s quickly take a look at the compatibility scores from caniuse.com for Flex.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17360\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png\" alt=\"Browser compatibility\" \/><\/a><\/p>\n<p>As you can see in the screenshot above, the latest two versions for every browser support Flex, the darker green colour as seen on most browsers means that CSS Flex has complete support on all of its properties. The olive coloured green as seen on IE (Internet Explorer) and the older versions of some browsers mean it has partial support which means ultimately it works, you just have to put a few modifications &amp; prefixes in your code to get it working properly, which you can find out about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Vendor_Prefix\">here<\/a>.<\/p>\n<h2>Let\u2019s build a Flexible Header<\/h2>\n<p>So now we know Flex is supported in all major browsers, it\u2019s time to introduce it into our workflow. How do we do this? Pull up your CSS file or head over to an online editor (I\u2019ll be building this in a JSbin which you can have access to) so follow along with this working example of building a desktop header menu in CSS Flex.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/end-result.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17361\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/end-result-700x152.png\" alt=\"CSS Flex end-result\" \/><\/a><\/p>\n<h3>What we will be building today.<\/h3>\n<h4>1). Setting up our HTML<\/h4>\n<p>We\u2019re going to keep this example as simple as we can. In your HTML file, we\u2019re going to need to add a few elements to get this working.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/0eba221c8b3e5b7a002ecd03bfb58cd1.js\"><\/script><\/p>\n<p>Let\u2019s talk about what we\u2019ve done in the above file from top to bottom.<br \/>\n\u2022 We\u2019re using an HTML5 element called a &lt;header&gt; to define a header area to work within. This is a great semantic tag to use.<br \/>\n\u2022 We\u2019re creating an anchor, with a class of \u2018logo\u2019 which contains an image. Most headers in websites have a logo, so it\u2019s only fitting ours does too.<br \/>\n\u2022 Next, we have a div with a class of \u2018nav-toggle\u2019 which we don\u2019t really need to worry about for now, but this will control our mobile-friendly version of the menu which will be built in Part 2 of this blog.<br \/>\n\u2022 Finally, we have another HTML5 element called, a &lt;nav&gt; and with that, we have defined a list with a &lt;ul&gt; with some links inside them.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-1.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17362\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-1-700x537.png\" alt=\"step-1\" \/><\/a><\/p>\n<h4>2). Defining our Flex items with CSS<\/h4>\n<p>Here comes the part we\u2019ve all been waiting for; but before we jump straight into writing some CSS it\u2019s important we understand two key concepts of Flex.<\/p>\n<p><em>With Flex we can define a Flexible container, these are the elements that wrap all of our items that we want to make flexible. We can also define our flexible elements which are the direct children of our flexible container.<\/em><\/p>\n<p><strong>Defining our Flex wrapper<\/strong><\/p>\n<p>With this in mind, let&#8217;s apply this rule to our HTML. Can you figure out what our Flex Container and Flex Children will be? We\u2019ll be defining this later on in our CSS.<\/p>\n<p>The Flex Container, in our case is the &lt;header&gt; element and the flex children are the \u2018logo\u2019, \u2018nav-toggle\u2019 and &lt;nav&gt; elements. This is because the &lt;header&gt; is the parent element that all 3 of our children elements belong to.<\/p>\n<p>It\u2019s time to define our flex container, we can do this by adding \u201c<strong>display: flex;<\/strong>\u201d<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/54ce3fd3e3b57e8f254a6a3da304dfc5.js\"><\/script><\/p>\n<p>If all is well, you should have seen some magic happen! Everything should go inline. The old-fashioned way of achieving this was either using \u201cdisplay: inline-block;\u201d or \u201cfloat: left\u201d on each child element, with a specified width but all we have to do now is tell the parent container to make it flexy!<\/p>\n<p>Using the \u201cdisplay: flex;\u201d property on an element defines it as our flex container. This means any children inside it have now become flexible. The reason your elements have gone on one line is that the default direction for flex is what\u2019s called \u201crow\u201d. We can change this by using another property on our flex wrapper called \u201c<strong>flex-direction: column<\/strong>\u201d your items will now become one per line as this has now changed our flex grid from an \u2018X\u2019 axis to a \u2018Y\u2019. I\u2019m going to cover more about our axis later on in this blog.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-2.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17363\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-2-700x455.png\" alt=\"step-2\" \/><\/a><\/p>\n<p>You can think of the flex-direction property as a way of defining our direction in the flex wrapper. Do you want items to go horizontally (row) or vertically (column)?<\/p>\n<p>For our example, we want all our elements on one line, so let\u2019s change it to \u201cflex-direction: row;\u201d or just remove it completely as this is the default value for flex.<\/p>\n<p><strong>Working with flex children<\/strong><\/p>\n<p>Now our children items are officially flexible and on the same line. We need to play around with the widths. By default, our elements widths are defined by their size, but our logo is far too big and we don\u2019t need to work with the \u2018nav-toggle\u2019 so let\u2019s hide that.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/2b0bd5989e5152f32dc2ce7803fc4472.js\"><\/script><\/p>\n<p>\u2022 First, we are defining a set width on our \u2018logo\u2019, as we don\u2019t want this any bigger than 150px;<br \/>\n\u2022 We\u2019re then telling the actual image inside our \u2018logo\u2019 to take up no more than 100% of the 150px width parent element.<br \/>\n\u2022 We\u2019ve also changed the image to display block. This makes it a block level element and it will force it to take up 100% width of the parent container.<br \/>\n\u2022 As we aren\u2019t doing responsive yet, we are just going to hide the nav-toggle for now.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-3.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17364\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-3-700x160.png\" alt=\"step-3\" \/><\/a><\/p>\n<p>We can now implement flex into our actual listed menu as we want them all on one line. The trivial way of doing this would be to set each &lt;li&gt; to \u201cdisplay: inline-block;\u201d but why not put our new skill set to use and define our parent element, the &lt;ul&gt; as a flex container, as well as adding a few more properties to tidy up some default padding &amp; font styles.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/9790c7ad9331a41ead5cde59f0194ed1.js\"><\/script><\/p>\n<p>\u2022 As done previously, we are defining our flex container on the &lt;ul&gt; as this is the direct parent of the flexible items ( &lt;li&gt; ). We\u2019ve also removed the default padding and margin and the list styling for the &lt;ul&gt;. I\u2019ve added a border to my &lt;ul&gt; just so I know where exactly it starts and ends, this will be useful for later on when it comes to making it take up the rest of the space.<br \/>\n\u2022 We\u2019ve also added some padding and a font family to the anchor, just to space them out a little more.<\/p>\n<h4>3). Changing our Flex items alignment<\/h4>\n<p>We\u2019ve made great progress so far, but it\u2019s time to introduce some new values that will change the positioning of our flex items.<\/p>\n<table style=\"height: 375px;\" width=\"630\">\n<tbody>\n<tr>\n<td width=\"200\">\n<h4>CSS Property<\/h4>\n<\/td>\n<td width=\"200\">\n<h4><strong>Accepted Values<\/strong><\/h4>\n<\/td>\n<td width=\"200\">\n<h4>What it does<\/h4>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"200\">display: flex;<\/td>\n<td width=\"200\">n\/a<\/td>\n<td width=\"200\">Defines our flex container<\/td>\n<\/tr>\n<tr>\n<td width=\"200\">flex-direction:<\/td>\n<td width=\"200\">Row, column, row-reverse, column-reverse<\/td>\n<td width=\"200\">The direction our flex items flow<\/td>\n<\/tr>\n<tr>\n<td width=\"200\">align-items:<\/td>\n<td width=\"200\">center, flex-start, flex-end<\/td>\n<td width=\"200\">The default alignment of our flex-container axis<\/td>\n<\/tr>\n<tr>\n<td width=\"200\">Justify-content:<\/td>\n<td width=\"200\">center, flex-start, flex-end<\/td>\n<td width=\"200\">The alignment of items not on our main axis<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>By default, alignment, we are talking the \u2018flex-direction\u2019 property, which we have touched on before. \u2018flex-direction: row\u2019 is the default direction of our flex axis. These means our items will go from left to right. We can make them go top to bottom by \u2018flex-direction: column\u2019. Makes sense, right?<\/p>\n<p>\u2018align-items\u2019 and \u2018justify-content\u2019 are the properties we use to align our flex children on the X and Y axis, by this we are talking about horizontally and vertically. We apply both these properties to our flex-container and not the flex children.<\/p>\n<p>By default, with using flex-direction: row, if we apply \u2018align-items: centre\u2019 to a flex container, it will centre the items <em>vertically<\/em> and if we apply \u2018justify-content: centre\u2019 to a flex container, it will centre the items <em>horizontally<\/em>.<\/p>\n<p>If we change it to flex-direction: column; the roles of these properties are then flipped, as our main axis has changed from a horizontal axis to a vertical axis, so then \u2018align-items: centre\u2019 will centre the items vertically, and \u2018justify-content: centre\u2019 will centre them horizontally. This will take some time to get used to!<\/p>\n<p>Let\u2019s put this into practice with our mega menu:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/9c903ffd1ce6f1a8cc7c3db5c0dcd71a.js\"><\/script><\/p>\n<p>\u2022 We\u2019ve added height 100% to our ul, which will make it take up 100% height of the parent, in this case, is the &lt;nav&gt; as this is the same height as the logo.<br \/>\n\u2022 We\u2019ve added align-items: centre; to align the items vertically.<br \/>\n\u2022 Try adding \u2018justify-content\u2019 to your ul and you\u2019ll notice it will centre them horizontally. We don\u2019t want it in our menu so I\u2019m going to leave it out.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-5.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17365\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/step-5-700x147.png\" alt=\"step-5\" \/><\/a><\/p>\n<p>With our design, we want our flex children to take up the entire width of the remaining space, if we were to do the maths behind that, we\u2019d be trying to figure out the following:<\/p>\n<p>100% (width of the window) \u2013 logo width = remaining space.<\/p>\n<p>With flex, this becomes a breeze. We can use a magical shorthand property which works out the remaining space and will force a child element to take it all up.<\/p>\n<p>\u2018flex: 1\u2019 is the property and it short for the following values:<\/p>\n<h3>Flex: 1 1 0;<\/h3>\n<p>Equivalent to flex: &lt;positive-number&gt; 1 0. Makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the free space in the flex container. If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.<\/p>\n<p>Let\u2019s make out list items stretch so each one takes up an equal amount of space to fill the entire red box.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/99ef8eb3b98058214184729e3d8e8ddb.js\"><\/script><\/p>\n<p>\u2022 We\u2019ve used our magic \u2018flex: 1\u2019 property which is forcing our &lt;nav&gt; to take up the remaining width of its parent element.<br \/>\n\u2022 On the list item, we\u2019ve also told each item to take up an equal amount of space remaining to fill up the &lt;nav&gt;<br \/>\n\u2022 We\u2019ve added borders to separate each item.<br \/>\n\u2022 We\u2019ve given them a height 100% to take up the height of the &lt;nav&gt; which is the same height as the logo.<br \/>\n\u2022 We\u2019ve once again defined each list item as a flex container which allows us to use our positioning properties to get the text centred vertically and horizontally.<br \/>\n\u2022 We\u2019ve added a background colour to make it look a little nice.<\/p>\n<p><a href=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/end-result-1.png\"><img decoding=\"async\" class=\"aligncenter size-large wp-image-17366\" src=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/end-result-1-700x152.png\" alt=\"end-result\" \/><\/a><\/p>\n<p>The complete CSS is below:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/charlie-fifteen\/7360dd791569a50d923353f54019bb90.js\"><\/script><\/p>\n<h4>Conclusion<\/h4>\n<p>With flex, the key aspect you need to remember is we have flex containers and flex children. The flex containers control the flex children\u2019s positioning.<\/p>\n<p>The beautiful thing about CSS Flex is that it is so easy to transform it responsive. In the next blog, I\u2019ll be covering how we can turn what we\u2019ve turned today into a responsive menu.<\/p>\n<p>For now, have a go at building your own menu and visit the JS bin we\u2019ve created together here to have a little play! If you&#8217;re looking for more assistance, look no further than <a href=\"https:\/\/www.fifteendesign.co.uk\/website-design-services\/website-development\/\">Fifteen Design<\/a>. Our development team is bursting with experience and happy to help with any web development needs.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"Without a doubt, Flex is one of the best advancements to CSS in the past decade. Flex marks an imperative milestone to CSS and the advantages of using this layout technology over the trivial method of floats and positioning is uncanny. So long to the days of tricky responsive hackery to get your website to [&hellip;]","protected":false},"author":53,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21578","post","type-post","status-publish","format-standard","hentry","category-news"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>An Introduction to CSS Flex and Browser Compatibility (Part 1) - Fifteen<\/title>\n<meta name=\"description\" content=\"Flex is one of the greatest advancements in CSS. Find out how to use Flex to master front end across all browsers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to CSS Flex and Browser Compatibility (Part 1)\" \/>\n<meta property=\"og:description\" content=\"Flex is one of the greatest advancements in CSS. Find out how to use Flex to master front end across all browsers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-30T13:28:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-31T15:40:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png\" \/>\n<meta name=\"author\" content=\"Sam Doyle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sam Doyle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An Introduction to CSS Flex and Browser Compatibility (Part 1) - Fifteen","description":"Flex is one of the greatest advancements in CSS. Find out how to use Flex to master front end across all browsers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/","og_locale":"en_GB","og_type":"article","og_title":"An Introduction to CSS Flex and Browser Compatibility (Part 1)","og_description":"Flex is one of the greatest advancements in CSS. Find out how to use Flex to master front end across all browsers.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2018-11-30T13:28:21+00:00","article_modified_time":"2023-01-31T15:40:48+00:00","og_image":[{"url":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png","type":"","width":"","height":""}],"author":"Sam Doyle","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Sam Doyle","Estimated reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/"},"author":{"name":"Sam Doyle","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2"},"headline":"An Introduction to CSS Flex and Browser Compatibility (Part 1)","datePublished":"2018-11-30T13:28:21+00:00","dateModified":"2023-01-31T15:40:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/"},"wordCount":1969,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png","articleSection":["News"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/","name":"An Introduction to CSS Flex and Browser Compatibility (Part 1) - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png","datePublished":"2018-11-30T13:28:21+00:00","dateModified":"2023-01-31T15:40:48+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2"},"description":"Flex is one of the greatest advancements in CSS. Find out how to use Flex to master front end across all browsers.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#primaryimage","url":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png","contentUrl":"https:\/\/s3.eu-west-2.amazonaws.com\/fifteen-uploads\/uploads\/2018\/11\/compatibility-700x152.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/an-introduction-to-css-flex-and-browser-compatibility-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"An Introduction to CSS Flex and Browser Compatibility (Part 1)"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/225efe9d507c30e4cfedd9db29c618f2","name":"Sam Doyle","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/705b2bbe1c8c8f0764afb5a35b0d21a15112491f97414856494078ee8d5faf9f?s=96&d=mm&r=g","caption":"Sam Doyle"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/samd\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=21578"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21578\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=21578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=21578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=21578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}