可変ボックス ("Flexbox") レイアウトの更新

Microsoft Edge では、最新の Flexbox 標準に合わせてサイトを更新し、クロスブラウザー コードを簡素化することができます。

W3C CSS 可変ボックス ("Flexbox") レイアウト モジュールのサポートは、2012 年 8 月に Internet Explorer 10 がリリースされたときに導入されました。 当時はまだ仕様が固まっていなかったため、ベンダー プレフィックスによって提供されていました。

2012 年 9 月に CSS 可変ボックス ("Flexbox") レイアウト モジュールが W3C 勧告候補として公開され、いくつかの仕様変更が組み込まれました。 Internet Explorer 11 の flexbox サポートはこれらの変更によって更新されており、プロパティやプロパティ値の名前の変更などが反映されています。 今後は、プレフィックスの付かない新しい名前 (および値) を使い、既にあるサイトもそれに応じて更新してください。

変更されたプロパティは次のとおりです。

削除するもの用途
-ms-flex-wrap プロパティ flex-wrap プロパティ
-ms-flex-order プロパティと flex-order プロパティ order プロパティ
-ms-flex-pack プロパティ justify-content プロパティ
-ms-flex-align プロパティ align-items プロパティ
-ms-flex-item-align プロパティ align-self プロパティ
-ms-flex-line-pack プロパティ align-content プロパティ

 

また、一部のプロパティでサポートされる値が変更されています。

プロパティ古い値新しい値
display "-ms-flexbox""flex"
display "-ms-inline-flexbox""inline-flex"
flex-wrap "none""nowrap"
align-contentalign-itemsalign-selfjustify-content "start""flex-start"
align-contentalign-itemsalign-selfjustify-content "end""flex-end"

 

さらに、以下のものが追加されました。

  • flex-growflex-shrinkflex-basis の各プロパティの短縮形のプロパティとして flex プロパティが追加されました。

  • align-content プロパティと justify-content プロパティで値 "space-around" と "space-between" がサポートされるようになりました。

  • 可変アイテムの既定の可変動作が変更されました。 Internet Explorer 10 では、コンテナーに収まらない可変アイテムはコンテナーの余白からオーバーフローするか、コンテナーの余白に合わせてクリップされていましたが、 Internet Explorer 11 以降では、コンテナーに合わせて縮小されるようになりました (min-width 値が指定されている場合はその値が下限)。 この動作を変更するには flex-shrink プロパティを使います。

サイトの互換性を保つために、Windows Phone 8.1 Update の Internet Explorer と Microsoft Edge は、すべての可変ボックス ("Flexbox") レイアウト プロパティと同等の最新の標準に加え、"-webkit-" プレフィックスの付いたバージョンもサポートされます。これには、次のものが含まれます。

推奨されなくなった、WebKit でサポートされるエイリアスと値最新のものと同等の標準
display: -webkit-box | -webkit-inline-box display: flex
-webkit-box-align: start | center | end | stretch | baseline align-items
-webkit-box-direction: normal | reverse | inherit flex-direction
-webkit-box-flex: <number> flex
-webkit-box-ordinal-group: <number> order
-webkit-box-orient: horizontal | vertical | inline-axis | block-axis | inherit flex-direction
-webkit-box-pack: start | center | end | justify justify-content

 

 

 

表示: