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)
Recent Comments