Question

I have update my Chrome to version 21. I have used flex property to defined some css style:

display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
-webkit-flex-direction: column;

But I find all the lost its effect in the new version chrome, so I try change to :

display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
-webkit-flex-direction: column;

the head 3 property have changed correctedly,
The last -webkit-flex-direction is still don’t work like before, but the chrome the develop tool show the property is correct

demo is here, I want to use the property make the h1 order in column

How can I solve this problem?Or should add some property?

Answer 1

That’s because Chrome 21 is the first version to use the new flexbox model.

Note: Chrome 29 and later do not use prefixes for flex properties.

I’ve written two implementations, based on your first example. My first demo uses the original version of the flexbox specification, the second one uses the latest version.
Here’s a demo which shows both in action: http://jsfiddle.net/dPK5f/2/ ^{(with flexible size: http://jsfiddle.net/dPK5f/3/)}

/* The properties are ordered to make it easier to compare them */
#old {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
}
#flex {
    display: -webkit-flex;
    -webkit-justify-content: center;
    -webkit-align-items: center;
    -webkit-flex-direction: column;
}

See also: https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes