--- title: "Web Design: Flexbox Rocks | Headjam" description: Some definitions and explanations on web design and the future including the CSS Flexible Box Layout Module. image: https://spreadable.headjam.com.au/hubfs/flexbox-001.jpg --- [Headjam logo](https://www.headjam.com.au) [+61 2 4929 1154](tel:+61249291154) [Work](https://www.headjam.com.au/portfolio) [About](https://www.headjam.com.au/what-we-do) [What we do](https://www.headjam.com.au/what-we-do)[Meet the team](https://www.headjam.com.au/meet-the-team)[Awards](https://www.headjam.com.au/awards) [Spreadable](https://spreadable.headjam.com.au/spreadable) [Contact](https://www.headjam.com.au/contact-us) # Web Design: Flexbox Rocks [![Luke Kellett](https://spreadable.headjam.com.au/hs-fs/hubfs/luke-kellett-avatar.png?width=400&height=400&upsize=true&upscale=true&name=luke-kellett-avatar.png)](https://spreadable.headjam.com.au/spreadable/author/luke-kellett)[Luke Kellett](https://spreadable.headjam.com.au/spreadable/author/luke-kellett) 12 Apr 2013 · [Web design](https://spreadable.headjam.com.au/spreadable/tag/web-design)· [Web development](https://spreadable.headjam.com.au/spreadable/tag/web-development) ![flexbox-001](https://spreadable.headjam.com.au/hs-fs/hubfs/flexbox-001.jpg?width=1200&name=flexbox-001.jpg) The word "[coding](https://en.wikipedia.org/wiki/Computer_programming)" conjures a few emotions for people. At Headjam we believe those feelings should be curiosity and excitement, but unfortunately confusion is often the most common reaction. If you are not one of those lucky individual who knows coding like the back (end) of your website, we've found this great video explaining the difference between [HTML](http://en.wikipedia.org/wiki/HTML) and [CSS](http://en.wikipedia.org/wiki/Cascading_Style_Sheets). There are even bright individuals out there who have a rough idea of what coding is, and even a few who know about different kinds of codes. For those of you who are already familiar with CSS and [HTML5](http://en.wikipedia.org/wiki/Html5), there's something new and amazing on the horizon! According to a blogpost from [The-Haystack](http://www.the-haystack.com/) which can be found [here](http://www.the-haystack.com/2012/01/04/learn-you-a-flexbox/), "Flexbox is a nickname for CSS Flexible Box Layout Module. It’s one of a few CSS Working Drafts having to do with visual layout. Flexbox offers us a new box model which has been optimised for laying out user interfaces. In short: the children of a “box” can be ordered either vertically or horizontally within their parent, and we can control what happens to any remaining space. It is possible to nest these boxes, allowing for very complex layouts." According to [this post](http://www.webmonkey.com/2013/04/the-future-of-css-flexbox-is-a-game-changer) from [webmonkey.com](http://www.webmonkey.com/),"HTML5 and CSS 3 offer web developers new semantic tags, native animation tools, server-side fonts and much more, but that’s not the end of the story. In fact, for developers slogging away in the web design trenches, one of the most promising parts of CSS 3 is still just over the horizon — true page layout tools." Our web design team here at Headjam, are also quite excited about the different web browsers Flexbox is making itself available to! As you can see, Internet Explorer even supports Flexbox, however in their enthusiasm they decided to roll out IE10 supporting the "old" Syntax. [Don't Fear the Internet, Episode 1](https://vimeo.com/24006296) from [Russ Maschmeyer](https://vimeo.com/strangenative) on [Vimeo](http://vimeo.com/). ![Web Design: Flexbox Rocks](https://spreadable.headjam.com.au/hubfs/Headjam%20May2018/Images/flexbox-002.jpg) ## If you have a project in mind or would like to work with us, send us a message. ## [![180 Websites in 180 Days!](https://spreadable.headjam.com.au/hs-fs/hubfs/Headjam%20May2018/Images/website_0001.jpg?width=1360&height=900&upsize=true&upscale=true&name=website_0001.jpg) 180 Websites in 180 Days!](https://spreadable.headjam.com.au/spreadable/180-websites-in-180-days) [Web design](https://spreadable.headjam.com.au/spreadable/tag/web-design) · [Web development](https://spreadable.headjam.com.au/spreadable/tag/web-development) ## [![Dabbles in Web Design: Fractalicious Goodness](https://spreadable.headjam.com.au/hs-fs/hubfs/fractals-001.jpg?width=1360&height=900&upsize=true&upscale=true&name=fractals-001.jpg) Dabbles in Web Design: Fractalicious Goodness](https://spreadable.headjam.com.au/spreadable/dabbles-in-web-design-fractalicious-goodness) [Design](https://spreadable.headjam.com.au/spreadable/tag/design) · [Web design](https://spreadable.headjam.com.au/spreadable/tag/web-design) · [Web development](https://spreadable.headjam.com.au/spreadable/tag/web-development) ## [![Web Design: 20 Years of World Wide Web](https://spreadable.headjam.com.au/hs-fs/hubfs/tim-berners-lee.jpg?width=1360&height=900&upsize=true&upscale=true&name=tim-berners-lee.jpg) Web Design: 20 Years of World Wide Web](https://spreadable.headjam.com.au/spreadable/web-design-20-years-of-world-wide-web) [Old school](https://spreadable.headjam.com.au/spreadable/tag/old-school) · [Web design](https://spreadable.headjam.com.au/spreadable/tag/web-design) · [Web development](https://spreadable.headjam.com.au/spreadable/tag/web-development) Have an idea in mind? [Get in touch](https://www.headjam.com.au/contact-us) [Contact](https://www.headjam.com.au/contact-us) [Awabakal Country 146 Parry Street Newcastle West NSW 2302](https://www.headjam.com.au/contact-us#map) [+61 2 4929 1154](tel:+61249291154) [Work](https://www.headjam.com.au/portfolio)[Health](https://www.headjam.com.au/what-we-do/health-promotion-campaigns)[Education](https://www.headjam.com.au/what-we-do/education-campaigns)[Community](https://www.headjam.com.au/what-we-do/community-campaigns)[Arts](https://www.headjam.com.au/what-we-do/arts-campaigns) [What we do](https://www.headjam.com.au/what-we-do)[Advertising campaigns](https://www.headjam.com.au/what-we-do/advertising-campaigns)[Advertising photography](https://www.headjam.com.au/what-we-do/advertising-photography)[Branding](https://www.headjam.com.au/what-we-do/branding)[Graphic design](https://www.headjam.com.au/what-we-do/graphic-design)[Marketing](https://www.headjam.com.au/what-we-do/marketing)[Print media](https://www.headjam.com.au/what-we-do/print-media)[Project management](https://www.headjam.com.au/what-we-do/project-management)[Video production](https://www.headjam.com.au/what-we-do/video-production)[Web and digital](https://www.headjam.com.au/what-we-do/web-and-digital) [About](https://www.headjam.com.au/meet-the-team)[Awards](https://www.headjam.com.au/awards)[Meet the team](https://www.headjam.com.au/meet-the-team) [Spreadable blog](https://spreadable.headjam.com.au/spreadable) Socials [Instagram](https://instagram.com/headjamcreative)[LinkedIn](https://www.linkedin.com/company/2642268)[X / Twitter](https://twitter.com/headjamcreative)[Facebook](https://www.facebook.com/headjamcreative)[TikTok](https://www.tiktok.com/@headjamcreative)[Pinterest](https://www.pinterest.com/headjamcreative/)[Vimeo](http://vimeo.com/headjamcreative)[YouTube](https://www.youtube.com/user/HeadjamBroadcast) Extras [Newsletter sign-up](https://www.headjam.com.au/subscribe) [Support](https://www.headjam.com.au/support) [Terms and conditions](https://www.headjam.com.au/terms) © Headjam Acknowledgement of country We acknowledge the Awabakal and Worimi people, the traditional custodians of Muloobinba, the stolen lands on which we work. We pay our respects to their Elders past, present and emerging. Sovereignty has never been ceded. It always was and always will be, Aboriginal land. [Headjam logo](https://www.headjam.com.au) ```json { "@context" : "https://schema.org", "@type" : "Article", "author" : "", "dateModified" : "2013-04-12 14:00:00", "datePublished" : "2013-04-12 14:00:00", "description" : "Some definitions and explanations on web design and the future including the CSS Flexible Box Layout Module.", "headline" : "Web Design: Flexbox Rocks", "image" : "https://cdn2.hubspot.net/hubfs/4430318/flexbox-001.jpg", "mainEntityOfPage" : "https://spreadable.headjam.com.au/spreadable/web-design-flexbox-rocks", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://333275-1023712-raikfcquaxqncofqfm.stackpathdns.com/uploads/images/seo/_openGraph/meta-card.png" }, "name" : "Headjam" }, "url" : "https://spreadable.headjam.com.au/spreadable/web-design-flexbox-rocks" } ```