Flexbox cheatsheet

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>

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;
}

 

 

Leave a Comment