CSS フレックスボックスレイアウト

CSS のフレックスボックスを用いると、要素を横/縦/複数行に直感的に並べることができる。

参考文献

Examples

サイドバー

この Cookipedia はフレックスボックスを用いることでサイドバーとメイン画面を左右に並べている。模式的 (でもなくそのものであるが) には以下である。このページも各要素がわかりやすいように色を付けている。 

<html>
<head>
<style type="text/css">
<!--
body {
  margin: 0;
  background: lightgray;
}
div.container {  /* フレックスコンテナ */
  display: flex;
  align-items: flex-start;  /* 規定値の stretch から変更し子要素の高さを揃えず上揃えに */
  background: honeydew;
}
div.sidebar {  /* フレックスアイテム（サイドバー）*/
  box-sizing: border-box;  /* 指定サイズ内でパディングを取るよう指示 */
  flex-basis: 100px;
  position: sticky;
  top: 0;
  padding: 20px;
  background: mistyrose;
}
main.main {  /* フレックスアイテム（メイン）*/
  flex-basis: 500px;
  background: lightcyan;
}
main.main>div.item {
  margin: 15px 0;
  padding: 20px;
  background: white;
}
-->
</style>
</head>
<body>
<div class="container">
  <div class="sidebar">
    メインページに戻る
  </div>
  <main class="main">
    <div class="item">
      ほげほげ<br/>ふがふが<br/>ほげほげ<br/>ふがふが<br/>
      ほげほげ<br/>ふがふが<br/>ほげほげ<br/>ふがふが<br/>
      ほげほげ<br/>ふがふが<br/>ほげほげ<br/>ふがふが<br/>
      ほげほげ<br/>ふがふが<br/>ほげほげ<br/>ふがふが<br/>
    </div>
  </main>
</div>
</body>
</html>
  • まずフレックスコンテナを配置する (淡い緑色)。display プロパティの値を flex とすることでフレックスコンテナになる。
    • flex-direction プロパティで中に配置する要素 (フレックスアイテム) が並ぶ方向を決める。デフォルト値は row なので左から右へ並ぶ (ただしアラビア語環境では逆になる)。
    • align-items プロパティで中に配置する要素の位置と高さをどう揃えるかを決める。 デフォルト値は stretch であり、最も高いフレックスアイテムの高さまで他のアイテムも伸びる。ただし、サイドバーを動かないようにする目的ではサイドバーをメイン画面に合わせて伸ばしてはならないので、ここでは flex-start (上揃え) としている。
  • 次に中に要素 (フレックスアイテム) を配置する。ここではサイドバー (ピンク色) とメイン画面 (水色) を配置している。flex-basis プロパティを設定すると、各要素はこの幅だけとって詰める (コンテナに余白があっても広がらない)。
    • ここで、ピンク色のサイドバーについては position: sticky; top: 0; とすることで、淡い緑色のコンテナから浮き上がり、画面が切り取るコンテナの上辺から 0 の位置に常に配置される。ただし、コンテナ内にいなければならないので、ピンク色のサイドバーが画面下に x だけはみ出している場合、スクロールしていってコンテナの画面下のはみ出しが x 未満になるタイミングからコンテナと連動してスクロールされることになる。

ヘッダーとフッター

ヘッダーは左揃え、メイン画面は中央揃え、フッターは右揃えにできる。そうしたいかはさておき。
ヘッダー
ほげほげほげほげ
ふがふがふがふが
ほげほげほげほげ
ふがふがふがふが
ほげほげほげほげ
ふがふがふがふが
ほげほげほげほげ
ふがふがふがふが
フッター
なお、モバイルブラウザでのオーバースクロール (画面の上/下の方をみていこうとスクロールしたときにその勢いのままに本来スクロールできない領域まで一旦スクロールされてしまい (その後に跳ね返る)、上の方にスクロールしたときはページがリロードされることが多い) を防ぐためには overscroll-behavior: none; を設定する (以下では overflow: auto; をもつ div 要素に設定しているが実際には html 要素などに設定するはずである) [3]。
ヘッダー
ほげほげほげほげ
ふがふがふがふが
ほげほげほげほげ
ふがふがふがふが
ほげほげほげほげ
ふがふがふがふが
ほげほげほげほげ
ふがふがふがふが
フッター
なお、overscroll-behavior: contain; では外側要素へのスクロール伝播を抑止するだけで画面端効果は抑制されない。スここでは画面端効果を抑止したいので overscroll-behavior: none; としなければならない (#スクロール伝播は抑止したくないが画面端効果のみ抑止したいときはどうするのだろうか)。