CODEWITHSUNDEEP
androidcssflexbox
Derek Henderson
Derek Henderson

Reputation: 9706

flexbox on Android

I thought it would be safe to use flexbox for my project, especially since I only need to do the most basic thing: I need to center a div on the screen.

However, on the Android 4.0 browser, the div is aligned top-left with a height of the full page, instead of being centered in the screen.

Here's my CSS:

#flex-container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex-direction: row;
    -moz-box-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#flex-item {
    margin: auto;
}

What am I missing?

Upvotes: 2

Views: 5011

Answers (2)

Derek Henderson
Derek Henderson

Reputation: 9706

I have finally found a combination that works:

#flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Seems I needed to include align-items and justify-content in their various incarnations.

Upvotes: 2

sroes
sroes

Reputation: 15053

Not sure about your construction, but I think this should work fine:

#flex-container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

See http://jsfiddle.net/XyS5m/

Upvotes: 0

Related Questions