flex justify-content demo

by Uriel Zarnihchi

HTML

flex-start
<div id="flexstart" class="flexbox">
   <div>Item 1</div>
   <div>Item 2</div>   
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>   
</div>
flex-end
<div id="flexend" class="flexbox">
   <div>Item 1</div>
   <div>Item 2</div>   
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>   
</div>
center
<div id="center" class="flexbox">
   <div>Item 1</div>
   <div>Item 2</div>   
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>   
</div>
space-between
<div id="spacebetween" class="flexbox">
   <div>Item 1</div>
   <div>Item 2</div>   
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>   
</div>
space-around
<div id="spacearound" class="flexbox">
   <div>Item 1</div>
   <div>Item 2</div>   
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>   
</div>

CSS

#flexstart {    
    justify-content:flex-start;
}
#flexend {     
    justify-content:flex-end;
}
#center {      
    justify-content:center;
    flex-direction: column;
}
#spacebetween {    
    justify-content:space-between;
}
#spacearound {
    justify-content:space-around;    
}

.flexbox {
    display:flex; 
    flex-direction:row;   
    width:550px;    
}
div {
    border:1px solid #cccccc;
    margin:5px;  
    padding:5px;
}
div > div {
    background:#ffcc99;
}