how to align elements in a row with equal space around

Hello friend,
For any front-end developer aligning elements in a row with equal space is very common problem. This problem can be solved very easily if site is non responsive. But it will little difficult if your site is responsive. One method to solve this problem is use some calculation with margin/padding to properly align elements with spaces in between. Or one solution can be write huge media query for spaces in all different window widths. For example to create menu bar and keep it align horizontally for all small devices as well.

CSS3 provides one very good feature to solve such problems easily, that is- display: flex

Consider below code to display divs with text class as headers link

 

    
Item1
    

    
Item2
    

    
Item3
    

    
Item4
    

    
Item5

Apply this CSS code to display headers properly in all window widths

#container{
    display:flex;
    justify-content: space-around;
}
.delimeter{
    border-left:1px solid red;
}

Result of this code will be as:

You can check this link to see the example: https://jsfiddle.net/JitendraPal/6fdLpLxd/

To work properly in all browsers use prefixed appropriately as shown below:

          display: flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -webkit-flex;
          justify-content: space-around;
          -ms-justify-content: space-around;
          -webkit-justify-content: space-around;
          -moz-justify-content: space-around;