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

December 2017

Flexbox cheatsheet

By | CSS, flexbox | No Comments

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.