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)
<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>
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.
<div class="container"> <div class="column"> content </div> <div class="column"> content </div> <div class="column"> content </div> </div>
.container{
display: flex;
}
.column{
flex: 1;
}