👻

画面上下いっぱいの領域を中央に揃える

2023/01/24に公開約1,300字

やりたいこと

次のようなレイアウトを目指す。特に珍しくもないレイアウトだが、当時Flex知識が曖昧で作り出すのに少々苦労したので、その時の覚書。

まずは中央揃え

containerでcontentを包み、containerのjustify-content: centerでcontentを真ん中に寄せる。その他、heightやwidth、backgroundを指定して...
これで、ぱっと見の見た目は↑と同じになるが・・・

  <body>
    <div id="container">
      <div id="content">
        <div id="block">Test</div>
        <div id="block">Test</div>
        <div id="block">Test</div>
      </div>
    </div>
  </body>
#container {
  display: flex;
  justify-content: center;
  height: 100vh;
}

#content {
  width: 500px;
  min-width: 500px;
  background-color: #eee;
}

画面の拡大orブラウザの縦サイズを縮小させると中の要素が中央の背景色からハミ出てしまい、よろしくない見た目となる。

中央領域を伸ばす

heightに100vhを指定しているが、中央領域の縦幅のMAX=画面の縦幅になってしまうのが良くなかった。

画面幅の変化に応じて伸び縮みさせるためには、flex-growを指定すればよい。
また、伸びる方向を上下にするためにcontainer側に、flex-direction: columnを指定する。方向を変えるとjustify-contentが効かないため、align-itemsを指定する。

修正すると以下のようになる。

#container {
  display: flex;
  align-items: center; // 変更
  height: 100vh;
  flex-direction: column; // 追加
}

#content {
  width: 500px;
  min-width: 500px;
  flex-grow: 1; // 追加
  background-color: #eee;
}

これで目的通り、画面上下いっぱいの領域が中央揃えとなり、画面サイズをいじっても特に見た目が崩れることがなくなった。完。

Discussion

ログインするとコメントできます