FlexBoxで縦に均等に分割する

高さが均等のボックスを縦に3つ並べ、かつ表示領域いっぱいに表示されるWebページのサンプルを紹介します。

均等の高さのボックスを縦に3つの例で見ますが、2個でも4個でも理屈は同じです。

結論的にはFlexBox(https://caniuse.com/#feat=flexbox)を使用すると簡単にできます。

まず、期待通りには動かないパターンを紹介するところからどのように変更していくかを見ていきます。単純にやろうとすると、divをbodyタグの中に3つ書いただけのパターンになると思います。わかりやすいようにボーダーを引いています。このパターンだと、divの高さは内容領域の高さになるため、表示領域いっぱいの高さにはなりません。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>テスト</title>
  <style>
   body {
    padding: 0;
    margin: 0;
   }
   .inner {
    border: 1px solid black;
   }
  </style>
 </head>
 <body>
  <main>
   <div class="inner">テスト1</div>
   <div class="inner">テスト2</div>
   <div class="inner">テスト3</div>
  </main>
 </body>
</html>

ここでFlexBoxを使用すると画面幅いっぱいで縦に均等に分割できます。簡単に解説すると、分割するdiv要素の親の要素(ここではmain)の高さを100vhとします。そして、分割する要素(div.inner)にflex: 1を指定します。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <title>テスト</title>
  <style>
   body {
    padding: 0;
    margin: 0;
   }

   main {
    display: flex;
    flex-direction: column;
    height: 100vh;
   }

   .inner {
    border: 1px solid black;
    flex: 1;
   }
  </style>
 </head>
 <body>
  <main>
   <div class="inner">テスト1</div>
   <div class="inner">テスト2</div>
   <div class="inner">テスト3</div>
  </main>
 </body>
</html>

コメント