Flexible Boxによる簡単レイアウト調整

提供: omotenashi-mind
移動先: 案内検索


cssの機能のひとつ、「Flexible Box」を利用したHTMLのレイアウトの簡単な調整方法についてまとめます。

Flexible Boxとは

Flexible Boxとは、複雑なレイアウトのページも簡単に実現できるようにするために設計されたレイアウト調整機能です。
画面表示幅に合わせた表示制御も可能なため、様々なデバイス・解像度にも閲覧しやすいページを提供することができるようになっています。

ためしに、ブラウザのウィンドウ幅を狭くして以下の表示要素を確認してみてください。
右端のdivが表示しきれなくなると、自動的に折り返しして表示される動作が確認できると思います。

content-1
content-2
content-3
content-4


レイアウト・サンプルパターン

横並び(左端から右端方向への配置・折り返しあり)

中の要素を左端から右端へ水平方向に並べる方法です。水平方向に並べたい要素をdivタグで囲み、そのdivタグに以下の様にスタイルを設定します。

.horizon-box-wrap {
  display: flex;
  flex-flow: row wrap;
}

実際の表示例は次の通りです。

content-1
content-2
content-3
content-4


横並び(左端から右端方向への配置・折り返しなし)

水平方向表示に加え、画面幅が不足しても折り返しさせたくない場合は次の通りに設定します。

.horizon-box-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

実際の表示例は次の通りです。

content-1
content-2
content-3
content-4


横並び(右端から左端方向への配置・折り返しあり)

中の要素を右端から左端へ水平方向に並べる方法です。

.horizon-right-box-wrap {
  display: flex;
  flex-flow: row-reverse wrap;
}

実際の表示例は次の通りです。

content-1
content-2
content-3
content-4


縦並び(上端から下端方向への配置・折り返しあり)

中の要素を上端から下端へ垂直方向に並べる方法です。

.vertical-box-wrap {
  display: flex;
  flex-flow: column wrap;
}

実際の表示例は次の通りです。

content-1
content-2
content-3
content-4


縦並び(下端から上端方向への配置・折り返しあり)

中の要素を下端から上端へ垂直方向に並べる方法です。

.vertical-bottom-box-wrap {
  display: flex;
  flex-flow: column-reverse wrap;
}

実際の表示例は次の通りです。

content-1
content-2
content-3
content-4


複雑なレイアウトパターン

上記レイアウトのサンプルパターンを組み合わせれば、複雑な画面構成も簡単に実現できます。
以下、構成例です。

header
item1
item2
item3
item4
item5
item6
content body







参考サイト