web-dev-qa-db-ja.com

CSS flexboxはIE10で機能しません

IE10では、このコードは正しく機能していません。

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex: auto 1;
    -moz-flex: auto 1;
    -ms-flex: auto 1;
    -o-flex: auto 1;
    flex: auto 1;
}

起こるべきことは、input[type=submit]が31ピクセル幅で、input[type=text]がform内の残りのスペースを占有することです。発生するのは、何らかの理由でinput[type=text]がデフォルトの263pxになっているだけです。

これは、ChromeおよびFirefoxで正常に機能します。

cssinternet-explorerflexbox
45
JacobTheDev

Flexレイアウトモードは、IEで（完全に）ネイティブにまだサポートされていません。 IE10は、完全に最新ではないがまだ動作する「トゥイーン」バージョンの仕様を実装しています。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

このCSS-Tricksの記事には、ブラウザー間でのflexbox（IEを含む）の使用に関するアドバイスがあります。 http://css-tricks.com/using-flexbox/

編集：もう少し研究した後、IE10 flexboxレイアウトモードは2012年3月のW3Cドラフト仕様に現在実装されています： http://www.w3.org/TR/2012/WD-css3- flexbox-20120322 /

最新のドラフトは1年ほど前です： http://dev.w3.org/csswg/css-flexbox/

41
Ennui

Ennuiが述べたように、IE 10はFlexboxの-ms接頭辞付きバージョンをサポートします（IE 11は接頭辞なしでサポートします）。コードに表示されるエラーは次のとおりです。

  • display: -ms-flexboxの代わりにdisplay: -ms-flexが必要です
  • flex: 0 1 autoのような3つのflex値をすべて指定して、あいまいさを回避する必要があると思います

最終更新コードは...

.flexbox form {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;

    /* Direction defaults to 'row', so not really necessary to specify */
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
}

.flexbox form input[type=submit] {
    width: 31px;
}

.flexbox form input[type=text] {
    width: auto;

    /* Flex should have 3 values which is shorthand for 
       <flex-grow> <flex-shrink> <flex-basis> */
    -webkit-flex: 1 1 auto;
    -moz-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -o-flex: 1 1 auto;
    flex: 1 1 auto;

    /* I don't think you need 'display: flex' on child elements * /
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    /**/
}
38
Simon East

IE10は古い構文を使用しています。そう：

display: -ms-flexbox; /* will work on IE10 */
display: flex; /* is new syntax, will not work on IE10 */

css-tricks.com/snippets/css/a-guide-to-flexbox を参照してください：

（tweener）は、[2012]の奇妙な非公式の構文を意味します（例：display：flexbox;）

10
Ben