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)
| <div class="container"> <div ></div> <div ></div> <div ></div> </div> |
| .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
| <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
| <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
| <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> |
… Read more
