Centering columns in flexbox

Question

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 with the two display:

.row-flex, .row-flex > div[class*='col-']
{  
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; /* same height */
        flex: 0 auto;
}

.col-centered
{
        display: inline-block; /* centered */
        float: none;
        text-align: left;
        margin-right: -4px;
}

This is my Bootply : http://www.bootply.com/rrpj1Y1cBB

How can I fix this? Thank you <3

score 5 · Accepted Answer · edited May 23 '17 at 12:23

5

.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

edited May 23 '17 at 12:23

Community

1
1

answered May 18 '16 at 14:34

Michael Benjamin

346,931
104
581
701

2

Oh! It was just `justify-content: center;` to do what i wanted (centered + same height) because in your Bootply the columns don't have the same height anymore. Thank you :) (and thank you for the editing <3) – Pierrou May 18 '16 at 16:13

Centering columns in flexbox

1 Answers1

Linked