縦並びのカードと上下端の間隔をすべて均等にするFlexboxの使い方
Flexboxを使って、縦並びにした5枚のカードと親要素の上下端の間隔をすべて均等にする方法を紹介します。このサンプルでは、flex-direction:column;でカードを上から下へ縦並びにし、justify-content:space-evenly;を使って、親要素の上端から最初のカードまで、カード同士の間、最後のカードから下端までに同じ間隔を作ります。
flex-direction:column;を指定すると主軸が縦方向になるため、今回のレイアウトではjustify-contentが上下方向の配置を調整します。justify-content:space-evenly;では、カード同士の間隔だけでなく、親要素の上端・下端との間隔も含めてすべて同じになります。上下端にカードを配置するspace-betweenや、カード間の間隔が上下端の余白の2倍になるspace-aroundとの違いも確認しやすい配置です。
この記事では、縦方向の配置をspace-evenlyで統一したまま、align-items:flex-start;、align-items:center;、align-items:flex-end;を使い分け、カードを左・中央・右へ配置する3パターンを紹介します。縦型メニューやリンク一覧、サイドバーなど、複数の項目を縦方向へ並べながら、上下端を含めて一定の間隔でバランスよく配置したいレイアウトに活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
左に配置
中央に配置
右に配置
3つのパターンはいずれも、flex-direction:column;で5枚のカードを縦並びにし、justify-content:space-evenly;で親要素の上端から最初のカードまで、カード同士の間、最後のカードから下端までの間隔をすべて均等にしています。横方向はalign-items:flex-start;、align-items:center;、align-items:flex-end;を使い分け、左・中央・右へ配置しています。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8に設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどで画面幅に合わせて表示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>縦並びのカードと上下端の間隔をすべて均等にするFlexbox</title>
<!-- 外部CSSファイルを読み込む -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flexbox-column-space-evenly_wrap">
<!-- 左に配置 -->
<div class="flexbox-column-space-evenly_item">
<div class="flexbox-column-space-evenly_method-title">
<code>align-items: flex-start;</code>
</div>
<div class="flexbox-column-space-evenly_container flexbox-column-space-evenly_container--left">
<div class="flexbox-column-space-evenly_card">1</div>
<div class="flexbox-column-space-evenly_card">2</div>
<div class="flexbox-column-space-evenly_card">3</div>
<div class="flexbox-column-space-evenly_card">4</div>
<div class="flexbox-column-space-evenly_card">5</div>
</div>
</div>
<!-- 中央に配置 -->
<div class="flexbox-column-space-evenly_item">
<div class="flexbox-column-space-evenly_method-title">
<code>align-items: center;</code>
</div>
<div class="flexbox-column-space-evenly_container flexbox-column-space-evenly_container--center">
<div class="flexbox-column-space-evenly_card">1</div>
<div class="flexbox-column-space-evenly_card">2</div>
<div class="flexbox-column-space-evenly_card">3</div>
<div class="flexbox-column-space-evenly_card">4</div>
<div class="flexbox-column-space-evenly_card">5</div>
</div>
</div>
<!-- 右に配置 -->
<div class="flexbox-column-space-evenly_item">
<div class="flexbox-column-space-evenly_method-title">
<code>align-items: flex-end;</code>
</div>
<div class="flexbox-column-space-evenly_container flexbox-column-space-evenly_container--right">
<div class="flexbox-column-space-evenly_card">1</div>
<div class="flexbox-column-space-evenly_card">2</div>
<div class="flexbox-column-space-evenly_card">3</div>
<div class="flexbox-column-space-evenly_card">4</div>
<div class="flexbox-column-space-evenly_card">5</div>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルは、HTMLファイルとCSSファイルの2つで構成されています。5枚のカードをflex-direction:column;で縦並びにし、justify-content:space-evenly;によって親要素の上端から最初のカードまで、カード同士の間、最後のカードから下端までの間隔をすべて均等にしています。左・中央・右の3パターンを用意しているため、縦方向の間隔を保ったまま横方向の配置を比較できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlには、左・中央・右へ配置する3つのFlexboxサンプルと、それぞれ5枚のカードを記述しています。style.cssには、カードを縦並びにする設定、上下端を含めたすべての間隔を均等にする設定、カードのサイズや枠線などのスタイルを記述しています。
設置方法・使い方
sampleフォルダの中にindex.htmlとstyle.cssを保存し、index.htmlをブラウザで開きます。3つのサンプルはいずれもflex-direction:column;とjustify-content:space-evenly;を使用しています。親要素の上端から最初のカードまで、カード同士の間、最後のカードから下端までが同じ間隔になります。横方向はalign-items:flex-start;で左、align-items:center;で中央、align-items:flex-end;で右へ配置されます。
カスタマイズできる内容
カード内の文字や内容は自由に変更できます。カードの枚数も変更できますが、枚数を増やす場合は、カードの高さと親要素の高さに合わせて調整してください。justify-content:space-evenly;では、カード同士だけでなく親要素の上下端との間隔も同じになるため、縦方向全体に一定の間隔を作ることができます。横方向の位置を変更したい場合は、各コンテナーのalign-itemsを変更します。
レスポンシブ対応
Flexコンテナーの横幅にはwidth:100%;とmax-width:900px;を指定しているため、画面幅が狭くなると利用できる横幅に合わせて縮小します。カードは80pxの固定幅を保ち、左・中央・右の配置もそれぞれ維持されます。
コメント