Call   0208 3131682   Mon-Fri 9am-6pm
Monthly Archives

December 2017

Flexbox cheatsheet

By | CSS, flexbox | No Comments

update: this is a very useful cheatsheet also (with lots of pics to explain)

css tricks guide to flexbox

Equal width columns (responsive i.e. Rows on small screen width)

 

Vertically align stuff

codepen reference to vertical and horizontal centering click here

Horizontally align stuff

Vertically and Horizontally align stuff

you might also need to add height:100% to the above container css ( to force container height)

 

Simple equal height columns ( height being flexible based on content height of largest column)

Set container to display flex, and items to flex: 1 , this will grow all columns to be the same height as the highest height column of the 3 based on its content.

 

 

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.