2

Chromeをバージョン21に更新しました。flexプロパティを使用していくつかのcssスタイルを定義しました。

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

しかし、新しいバージョンのchromeではその効果がすべて失われていることがわかったので、次のように変更してみます。

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

ヘッド3のプロパティが正しく変更されました。最後のプロパティ-webkit-flex-directionは以前のようには機能しませんが、開発ツールがプロパティが正しいことを示すクロム

デモはここにあります、私はプロパティを使用してh1列で注文します

この問題を解決するにはどうすればよいですか？または、プロパティを追加する必要がありますか？

4

1 に答える 1

5

これは、Chrome21が新しいフレックスボックスモデルを使用する最初のバージョンであるためです。

注：Chrome 29以降では、フレックスプロパティにプレフィックスを使用しません。

最初の例に基づいて、2つの実装を作成しました。私の最初のデモでは元のバージョンのフレックスボックス仕様を使用し、2番目のデモでは最新バージョンを使用しています。
これが両方の動作を示すデモです：http：//jsfiddle.net/dPK5f/2/ （柔軟なサイズ：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;
}

参照：https ：//developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes

于 2012-08-02T09:25:34.890 に答える