update: this is a very useful cheatsheet also (with lots of pics to explain)
Equal width columns (responsive i.e. Rows on small screen width)
1 2 3 4 5 | <div class="container"> <div ></div> <div ></div> <div ></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .container { display:flex; } .container div {flex-basis:100%;} @media screen and (max-width:600px) { .container { flex-direction: column; } } |
Vertically align stuff
codepen reference to vertical and horizontal centering click here
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> #container{ display: flex; align-items: center; /* vertically */ height: 300px; /* just to illustrate: give container a height so we can clearly see div inside is vertically centered */ } </style> <div id="container"> <div> align me vertically in my container </div> </div> |
Horizontally align stuff
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> #container{ display: flex; justify-content: center; /* horizontally */ width: 800px; /* just to illustrate: give container a width so we can clearly see div inside is vertically centered */ } </style> <div id="container"> <div> align me horizontally in my container </div> </div> |
Vertically and Horizontally align stuff
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style> #container{ display: flex; align-items: center; /* vertically */ justify-content: center; /* horizontally */ } </style> <div id="container"> <div> entered ( give container height and/or width to make obvious) </div> </div> |
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.
1 2 3 4 5 | <div class="container"> <div class="column"> content </div> <div class="column"> content </div> <div class="column"> content </div> </div> |
1 2 3 4 5 6 7 | .container{ display: flex; } .column{ flex: 1; } |
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.
Recent Comments