Learn and Visualise Flexbox

Development Tools | Tags:
Link | Source

The last few days at work I’ve been creating page layouts for some new websites. Given these were from scratch, rather than the recent swathe of updates to sites I have been doing I thought it was a good chance to apply some flexbox css. I have used it before a little in Angular applications, using Angular Flex-Layout, but hadn’t really used it natively.

Good old mate css-tricks has a nice little guide about what the settings are, but I was having a hard time remembering all the options and which one did what etc. I just couldn’t picture it. So I decided I would make a little tool for both visualising what each setting would do, and for then being able to copy and paste those css atributes straight into my work. I based what I was doing off the excellent Angular Flex-Layout demo here.

Please, check it out on Github (code) and if you have any suggestions feel free to contribute them.