Centering Columns In Flexbox

This is my goal : Flex works and centering works too. But both don't work :/ The centered option doesn't work anymore due to flex. I think, this is due to those parts from the CSS

Solution 1:

.row-flex, .row-flex > div[class*='col-'] {

        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex: 0 auto;

        justify-content: center;       /* NEW; center flex items horizontally */align-items: center;           /* NEW; center single-line flex items vertically */align-content: center;         /* NEW; center multi-line flex items vertically */

}

Revised Demo

More details here: How to Center Elements Vertically and Horizontally in Flexbox