flex-three-columns

HTML

<body>
    <p>Flexbox nuovo</p>
    <div class="flex">
        <div>The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.</div>
        <div>The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.</div>
        <div>The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.</div>
    </div>
</body>

CSS

.flex {
       /* basic styling */
       width: 350px;
       height: 600px;
       border: 1px solid #555;
       font: 14px Arial;
       /* flexbox setup */
       display: -webkit-flex;
       -webkit-flex-direction: row;
       display: flex;
       flex-direction: row;
   }
   .flex > div {
       -webkit-flex: 1 1 auto;
       flex: 1 1 auto;
       width:1px;
        
       /* To make the transition work nicely.  (Transitions to/from
                      "width:auto" are buggy in Gecko and Webkit, at least.
                      See http://bugzil.la/731886 for more info.) */
       -webkit-transition: width 0.1s ease-out;
       transition: width 0.1s ease-out;
   }
   /* colors */
   .flex > div:nth-child(1) {
       background : #009246;
   }
   .flex > div:nth-child(2) {
       background : #F1F2F1;
   }
   .flex > div:nth-child(3) {
       background : #CE2B37;
   }