Introduction to Flexbox

26 February 2016 • in Code

Flexbox is a new CSS Layout model alongside with inline, block, table or explicit positioning. It introduces new properties dedicated to parent and child elements. I wrapped everything you need to know into a Google Slides presentation and a demo website featuring 33 Flexbox examples.

The Google Slides are available here : https://goo.gl/oD7xzY. It is the read-only version. It starts with a bit of Flexbox history then dive into the presentation of the new properties. There are some comments so you know which example is linked to the slide you are viewing.

For your convenience, the example website is hosted on GitHub Pages : http://goo.gl/CcuIth. You can use the arrow keys (left, right) to navigate between examples. Alternatively you can host the website yourself by cloning the GitHub repository :

$ git clone https://github.com/snapeuh/flexbox-presentation.git
$ cd flexbox-presentation

You can use lite-server npm module to serve the website locally :

$ npm install -g lite-server
$ lite-server

Let me know on Twitter if you have any suggestion or question, I’ll be glad to help!

Update :

I just discovered a small Tower Defense game that will help you learn Flexbox : FlexboxDefense.