Internet Explorer 10 の可変ボックス ("Flexbox") レイアウト

  この内容は、Internet Explorer 10 の CSS 可変ボックスに適用されます。Flexbox の最新情報については、「可変ボックス レイアウト」をご覧ください。
 
注意  Internet Explorer 11 は、flexbox プロパティの Microsoft ベンダー プレフィックス ("-ms-") バージョンをサポートしなくなりました。 標準の準拠や今後の互換性のため、代わりにプレフィックスなしの名前を使う必要があります。変更とベスト プラクティスの要約については、「可変ボックス ("Flexbox") レイアウトの更新」をご覧ください。
 

Internet Explorer 10 と、Windows 8 の JavaScript を使った Windows ストア アプリでは、CSS 可変ボックス レイアウト モジュール ("Flexbox") のサポートが導入されました。現時点では、flexbox モジュールは World Wide Web コンソーシアム (W3C) 草案です。(Internet Explorer 10 での flexbox の実装は、2012 年 3 月 22 日版の「Flexbox」草案に基づいています。)Flexbox は、カスケード スタイル シート レベル 2 リビジョン 1 (CSS2.1) で定義されている (そして display プロパティで有効にする) ブロック レイアウト、インライン レイアウト、テーブル レイアウト、位置決めレイアウトの 4 つの基本レイアウト モードに加えて利用できます。Flexbox レイアウトは、複雑な Web ページをレイアウトすることを目的とし、画面やブラウザー ウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。位置とサイズを正しく設定するのが難しいフロートへの依存を軽減できます。

Flexbox レイアウトは、ボックスのサイズを定義するときに利用可能な領域を考慮することで、相対サイズと相対配置を有効にします。たとえば、ブラウザー ウィンドウ内の余分な空白を、複数の子要素にそのサイズに応じて均等に分配し、それらの子要素をコンテナーとなるブロックの中央に配置することができます。

flexbox レイアウトを使うと、次の作業が可能になります。

  • — 異なるサイズの画面やブラウザー ウィンドウを使用した際にも — 流動的で、しかも互いに相対的な位置とサイズを維持する複数の要素 (イメージ、コントロールなど) で構成されるレイアウトを構築する。
  • 一連の要素のレイアウト軸 (水平または垂直) に並行する余白を、指定した要素のサイズの増加に比例して割り当てる方法を指定する。
  • 一連の要素のレイアウト軸に並行する余白を、一連の要素の前後または間に割り当てる方法を指定する。
  • 左右に並べて配置されたボタンの上下の余白など、要素の周りにある、要素のレイアウト軸に対して垂直な余白の形を指定する。
  • ページ内に要素を配置する方向を制御する — たとえば、上から下、左から右、右から左、下から上など。
  • ドキュメント オブジェクト モデル (DOM) で指定されている順序とは異なる順序で、画面上の要素を並べ替える。

flexbox コンテナー

flexbox レイアウトを有効にするには、最初に flexbox コンテナーを作成する必要があります。そうするには、要素の display プロパティを "-ms-flexbox" (ブロック レベルの flexbox コンテナーの場合) または "-ms-inline-flexbox" (インライン flexbox コンテナーの場合) に設定します。(CSS 可変ボックス レイアウト モジュールの草案は暫定版であるため、この値を始め、このセクションのプロパティを Internet Explorer 10 と、Windows 8 の JavaScript を使った Windows ストア アプリで使うときは、いずれも Microsoft 固有のベンダー プレフィックス "-ms-" を付ける必要があります。) たとえば、次のコード例では、"myFlexbox" という ID の要素内でブロック レベルの flexbox コンテナーを作成しています。


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  background: gray;
  border: blue;
}
</style>


flexbox の方向の設定

flexbox コンテナーを作成するときは、方向も設定できます — つまり、右から左、左から右、上から下、下から上のどの方向で子を表示するかを指定できます。これは次のプロパティで指定します。

プロパティ説明

-ms-flex-direction

オブジェクトのすべての子要素のレイアウトの方向を指定します。

このプロパティに指定できる値は、次のキーワードです。

row

これは初期値です。子要素は、ソース ドキュメントで宣言されているのと同じ順序 (左から右) で表示されます。

-ms-box-orient:horizontal の例
column

子要素は、ソース ドキュメントで宣言されているのと同じ順序 (上から下) で表示されます。

-ms-box-orient:vertical の例
row-reverse

子要素は、ソース ドキュメントで宣言されているのと逆の順序 (右から左) で表示されます。

-ms-box-direction:normal の例
column-reverse

子要素は、ソース ドキュメントで宣言されているのと逆の順序 (下から上) で表示されます。

inherit

子要素は、親要素のこのプロパティの計算値と同じ順序で表示されます。

 

たとえば、次の ID セレクターでは -ms-flex-direction プロパティを追加して、これに row を設定しています。


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-direction: row;
  background: grey;
  border: blue;
}
</style>


flexbox の配置の設定

flexbox コンテナーを作成するときは、配置も設定できます — つまり、-ms-flex-direction プロパティで定義されたレイアウト軸に対して垂直な方向の子の表示位置を指定できます。

プロパティ説明

-ms-flex-align

オブジェクトの子要素の配置 (-ms-flex-direction プロパティで定義されたレイアウト軸に垂直) を設定します。

このプロパティに指定できる値は、次のキーワードです。これらのキーワードは writing-mode に依存することに注意してください。親要素および子要素のリーディング エッジと子要素のトレーリング エッジはどちらもレイアウト方向に依存します。たとえば、リーディング エッジは、左から右のレイアウトの場合は親要素の上端、上から下のレイアウトの場合は親要素の左端のようになります。同様に、子要素のトレーリング エッジは、左から右のレイアウトの場合は下端、上から下のレイアウトの場合は右端のようになります。

start

親要素に row または column-ms-flex-direction の計算された値がある場合、各子要素のリーディング エッジ (またはベースライン) は、オブジェクトのリーディング エッジに揃えて配置されます。レイアウト軸に対して垂直方向のすべての余白は、各子要素のトレーリング エッジの後に置かれます。

親要素に row-reverse または column-reverse-ms-flex-direction の計算された値がある場合、各子要素のトレーリング エッジ (またはベースライン) は、オブジェクトのトレーリング エッジに揃えて配置されます。レイアウト軸に対して垂直方向のすべての余白は、各子要素のリーディング エッジの前に置かれます。

-ms-box-align:before の例
end

親要素に row または column-ms-flex-direction の計算された値がある場合、各子要素のトレーリング エッジは、オブジェクトのトレーリング エッジに揃えて配置されます。レイアウト軸に対して垂直方向のすべての余白は、各子要素のリーディング エッジの前に置かれます。

親要素に row-reverse または column-reverse-ms-flex-direction の計算された値がある場合、各子要素のリーディング エッジは、オブジェクトのリーディング エッジに揃えて配置されます。レイアウト軸に対して垂直方向のすべての余白は、各子要素のトレーリング エッジの後に置かれます。

-ms-box-align:after の例
center

各子要素が、オブジェクトのリーディング エッジとトレーリング エッジの中央に配置されます。レイアウト軸に対して垂直方向のすべての余白は、各子要素の前後に均等に分配されます。

-ms-box-align:middle の例
stretch

これは初期値です。各子要素は、レイアウト軸に対して垂直方向の利用可能な領域いっぱいに配置されます。設定された場合、子要素の max-width または max-height プロパティが優先され、レイアウトは start の規則に従います。

-ms-box-align:stretch の例
baseline

すべての子要素のベースライン (-ms-flex-direction プロパティに応じて、リーディング エッジまたはトレーリング エッジ) が揃うように配置されます。

レイアウト軸に対して垂直方向に最大の領域を占める子要素は、start の規則に従います。残りのすべての要素のベースラインは、この要素のベースラインに揃えられます。

-ms-box-align:baseline の例

 

たとえば、次の ID セレクターでは -ms-flex-align プロパティを追加して、これに start を設定しています。


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-align: start;
  background: grey;
  border: blue;
}
</style>


flexbox の子要素間の余白の分配

flexbox の子要素間の余白の分配は、次のプロパティで指定できます。

プロパティ説明

-ms-flex-pack

オブジェクトの子要素間の余白 (-ms-flex-direction プロパティで定義された軸の方向の余白) の分配方法を指定します。

このプロパティに指定できる値は、次のキーワードです。これらのキーワードは writing-mode に依存することに注意してください。親要素と子要素の開始エッジと終了エッジはレイアウト方向に依存します。たとえば、開始エッジは、左から右のレイアウトの場合は親要素の左端、上から下のレイアウトの場合は上端のようになります。同様に、子要素の終了エッジは、左から右のレイアウトの場合は右端、上から下のレイアウトの場合は下端のようになります。

start

これは初期値です。レイアウト軸の方向に沿って、最初の子要素の開始エッジが親要素の開始位置に揃えて配置され、以降の子要素の開始エッジが前の子要素の終了エッジに揃えて配置されていきます。レイアウト軸の方向のすべての余白が、レイアウト軸方向の末尾に配置されます。

-ms-box-pack:start の例
end

レイアウト軸の方向に沿って、最初の子要素の終了エッジが親要素の終了位置に揃えて配置され、以降の子要素の終了エッジが前の子要素の開始エッジに揃えて配置されていきます。レイアウト軸の方向のすべての余白が、レイアウト軸方向の先頭に配置されます。

-ms-box-pack:end の例
center

start キーワードや end キーワードと同じようにすべての子要素が端を揃えて配置されますが、それらの子要素のグループが親要素の開始エッジと終了エッジの間の中央の位置に配置されます。すべての余白が最初の子要素の前と最後の子要素の後に均等に分配されます。

-ms-box-pack:center の例
justify

最初の子要素の開始エッジが親要素の開始位置に揃えて配置され、最後の子要素の終了エッジが親ボックスの終了位置に揃えて配置されます。残りのすべての子要素は、最初の子要素と最後の子要素の間に、レイアウト軸の方向の余白が子要素間で均等に分配されるようにして配置されます。

-ms-box-pack:justify の例

 

たとえば、次の ID セレクターでは -ms-flex-pack プロパティを追加して、これに justify を設定しています。


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  background: grey;
  border: blue;
}
</style>


子要素の折り返しの有効化

1 行に収まらない flexbox の子要素は、次のプロパティを使って次の行に折り返しフロー方向を制御することができます。

プロパティ説明

-ms-flex-wrap

オブジェクトの利用可能な領域に基づいて複数の行や列に子要素を折り返すかどうかを指定します。

このプロパティに指定できる値は、次のキーワードです。

none

これは初期値です。すべての子要素が 1 つの行や列に表示されます。オブジェクトの overflow プロパティによって、子要素が非表示になるか、クリップされるか、スクロール可能になるかが決まります。

wrap

子要素は折り返されて、連続する平行な行や列に表示されます。オブジェクトは、追加の行や列を入れられるように、writing-mode プロパティで定義されている軸に対して垂直方向に高さまたは幅が拡張されます。

-ms-box-line-progression:normal の例
wrap-reverse

子要素は折り返されて、連続する平行な行や列に逆の順序で表示されます。オブジェクトは、追加の行や列を入れられるように、writing-mode プロパティで定義されている軸に対して垂直方向に高さまたは幅が拡張されます。

-ms-box-line-progression:reverse の例

 

Internet Explorer 10 では、すべてのボックスを最小のサイズにすることで、親ボックスの子要素ができるだけ少ない行に収まるように調整されます。単独の要素が行に収まらない場合は、行の末尾でクリッピングされます。

行を追加するとき、既定ではブロック方向に従って追加されます。左から右と右から左のどちらのレイアウトでも、既存の行の下に新しい行が追加されます (ブロック方向が上から下に明示的に定義されている場合は除く)。同様に、縦方向のレイアウトで新しい行が左右どちらに表示されるかはブロック方向によって決まり、記述方向やその他の特定の設定に応じて左から右または右から左のどちらかになります。

たとえば、次の ID セレクターでは -ms-flex-wrap プロパティを追加して、これに wrap を設定しています。


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  background: grey;
  border: blue;
}
</style>


flexbox の子要素の追加

flexbox コンテナーを作成したら、子要素を追加できます。flexbox コンテナーに子要素を追加するには、次のマークアップに示すように、要素を flexbox 要素の直接の子にします。


<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>


子要素の可変性の設定

親ボックスのレイアウト軸方向の余白を子要素に比例して分配する方法を制御できます。-ms-flex プロパティを使うことによって、flexbox アイテムの "flex" の幅または高さを変更し、利用可能な領域全体を使うことができます。flexbox は、各アイテムの正の可変性に応じて空き領域を分配するか、オーバーフローを避けるために、各アイテムの負の可変性に応じてそれらを縮小します。

-ms-flex プロパティを含む要素が flexbox アイテムである場合、要素のサイズは width または height プロパティではなく、-ms-flex プロパティに基づいて決められます。要素が flexbox アイテムでない場合、-ms-flex プロパティは効果を持ちません。

プロパティ説明

-ms-flex

オブジェクトの利用可能な領域に基づいて子要素の幅または高さを可変にするかどうかを指定します。この値は、利用可能な領域の子要素に割り当てられる比率も示します。 構文は次のとおりです。


-ms-flex: <positive-flex> <negative-flex> <preferred-size>

このプロパティは、次のいずれかの値か、none に設定できます。

<positive-flex>

正の可変性を設定する整数。 省略すると、要素の正の可変性は "1" になります。 負の値は、有効ではありません。

<negative-flex>

負の可変性を設定する整数。 省略すると、要素の負の可変性は "0" になります。 負の値は、有効ではありません。

<preferred-size>

flexbox アイテムの推奨サイズを設定します。width または height プロパティの任意の有効な値 (inherit を除く) を指定できます。 省略すると、推奨サイズは "0px" になります。 flexbox の子で <preferred-size> コンポーネントが auto になっている場合、推奨サイズは flexbox アイテムの width または height プロパティ (主軸と平行な方) の値になります。

none

これは初期値です。-ms-flex を "0 0 auto" に設定した場合と同じになります。

 

flexbox の子要素のグループ化

flexbox の子要素は、グループ番号を使ってグループ化できます。これにより、レイアウト軸に沿って各要素をレンダリングする順序を、DOM の順序に関係なく制御できます。グループ化の設定は次のプロパティで行います。

プロパティ説明

-ms-flex-order

flexbox 要素を含める順序グループを指定します。これは、グループの表示順序 (-ms-flex-direction プロパティで定義された軸の方向の表示順序) を示す整数で、

0 より大きい整数を指定する必要があります。このプロパティの初期値は "0" です。

 

-ms-flex-order プロパティでは、0 から始まる順序グループに要素をまとめることができます。指定されたレイアウト軸に沿って、順序グループごとにすべての子要素がレンダリングされ、その後に次の順序グループの子要素がレンダリングされます。そのため、順序グループ 0 のすべての子要素は、順序グループ 1 のどの子要素よりも先にレンダリングされます。順序グループ内の要素がレンダリングされる順序は、DOM の順序に従います。行を追加するとき、既定ではブロック方向に従って追加されます。

たとえば、次のマークアップでは、4 つの子要素を定義し、それらのほとんどに -ms-flex-order プロパティを使って順序の値を割り当てています。


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>


child2child4 の順序グループは 0 で、child1child3 の順序グループは 1 です。順序グループごとに DOM の順序に従って子要素がレンダリングされるため、親 flexbox 要素に表示される順序は child2child4child1child3 の順になります。このスクリーン ショットを次に示します。

上記のサンプルを示すブラウザー ウィンドウのスクリーンショット

このページを表示してみましょう。(このページを正しく表示するには、Internet Explorer 10 が必要です。)

関連トピック

可変ボックス レイアウト

 

 

表示: