Flex Box And Prejudice

I don't know why some people have some superstitious feelings about using flex box css property. In this article I will try to convince you that using flex will make your life(as html programmer) much easier.
First of all i must recommend this great article that also supplies this great playground
For getting things easy to understand - I will start straight with some example:
lets say you need to build a page with following layout:
You have 2 groups of buttons - the one group should stick to the left and other one - should stick to the right. I want to show you two different ways to implement this layout:
HTML:

    
    <nav>
       <div class="left-menu">
          <button class="fa fa-refresh"></button>
          <button>Provisioning Events</button>
        </div>
        
       <div class="right-menu">
          <button>butt1</button>
          <button>butt2</button>
          <button>butt3</button>          
        </div>>         
    </nav>

CSS
1. using the "justify-content:space-between" css feature:

nav{
   display:flex; 
   justify-content:space-between;
}

2. using "flex:1" rule on style of .right-menu

nav{
   display:flex; 
}
.right-menu{
  flex:1;
  display:flex; 
  justify-content:flex-end;
}

What is "flex:1"?

"flex:1" shorthand for the flex-grow, flex-shrink and flex-basis properties, in our case means that .right-menu should capture all available space at the right of .left-menu.
Hope now you can see that flex-box feature has more various options to play with (more flexible after its name)...

One More Example

How to make footer to stick to bottom of the parent element? Lets say you have some kind of dialog with content and footer (which suppose to stick to the floor), and content need to "catch" all the remaining space?

   <div class="modal">
       <form>
         <main>
           content content content
           <br/>
           
           <div style="display:none;color:red" id="koko">
              something different here...
           </div>
         </main>
         <footer> 
           <button>footer</button>
         </footer>
       </form>
   </div>

So, Flex-Box can be helpful again:

.modal form{
  display:flex;
  flex-direction:column;
  height:230px;
  width:240px; 
  background:red;
  color:#fff;
}
main{  
  background:blue;
  flex:1;
}
#koko{
  height:170px;
  background:#fff;
}
footer{
  padding:5px;
}

JS Bin on jsbin.com