web-dev-qa-db-ja.com

ie10とフレックスボックス？ （悪夢）

残念ながら、WebサイトのコードをInternet Explorer 10と互換性を持たせる必要があり、公式Webサイトのドキュメントを読んだ後でも、いくつかの問題が発生しています。

これが私のCSSコードです：

.uberflex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;

    display: -webkit-flex;
    -webkit-flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    -webkit-align-items: flex-start;

    display: -ms-flexbox;
    -ms-flex-flow: column wrap;
    -ms-justify-content: flex-start;
    -ms-align-items: flex-start;
}

私の知る限り、ie10はflexboxをサポートしていますが、ここに置いた「-ms-」プレフィックスのみを使用しています。ie10でコンソールを確認すると、「display：-ms」が表示されます。 -flexbox; "しかし、他の" -ms- "プレフィックスはありませんか??なぜこれが起こっているのか誰かが明確にできますか？

ありがとう！ :-)

cssinternet-explorerinternet-explorer-10flexbox
13
shan

ええ、flexbox for IE 10は完全な悪夢です。

IE 10 flexboxいくつかのサイトからスクレイプされたサポート（ this 1つは非常に役に立ちました））に関するヒントを次に示します。

まず第一に-非常に便利なフラグ（すべての要素に配置できます）：

  • IE10固有のCSSを分離するためのフラグ

    .lt-ie11 & { }

次の定義をcontainer要素に配置する必要があります

  • Flexコンテナを定義します

    display: -ms-flexbox;

。

  • 水平方向の配置：

    -ms-flex-pack: start/end/center/justify;

。

  • 垂直方向の配置

    -ms-flex-align: start/end/center/stretch/basline;

次の定義は、child要素（「アイテム」）に配置する必要があります

  • 要素の順序

    注文番号は正または負の場合があります。数値が小さいほど、コンテナの開始に近い要素が表示されます

    -ms-flex-order [number]

。

  • アイテムの拡大/縮小/優先サイズの設定

    これはフレックスボックスの重要な概念であり、flexboxコンテナの子要素間で余分なまたは負の（欠落している）スペースをどのように分割するかを制御します。

    基本的に、数値が大きいほど、優先サイズに追加されるスペースが増えるか（拡大の場合）、要素からスペースが差し引かれ、収まるようになります（縮小の場合）。 「0」の値が割り当てられている場合、要素のサイズは影響を受けません。

    -ms-flex: [grow shrink size];

    または、shorhandバージョン：

    -ms-flex: [value]; // == -ms-flex: value value 0

    明示的に定義されていない限り、IE10はデフォルトの優先サイズ0を提供することに注意してください。これにより、要素が完全に消える可能性があります。これは、明示的なサイズ（pxまたは%のいずれか）を定義するか、auto）として定義することで軽減できます。


Flexboxの一般的な説明については、 ここ を参照してください。クイックルックアップは ここ です。

62
sangil