縦並びのカードの上下に均等な余白を作るFlexboxの使い方
Flexboxを使って、縦並びにした5枚のカードそれぞれの上下に均等な余白を作る方法を紹介します。このサンプルでは、flex-direction:column;でカードを上から下へ縦並びにし、justify-content:space-around;を使って各カードの上下に同じ量の余白を割り当てます。隣り合うカードの間では、それぞれのカードに割り当てられた上下の余白が合わさるため、カード間の間隔は親要素の上端・下端の余白の2倍になります。
flex-direction:column;を指定すると主軸が縦方向になるため、今回のレイアウトではjustify-contentが上下方向の配置を調整します。justify-content:space-around;では、各カードを基準にして上下へ同じ量の余白が割り当てられるのが特徴です。そのため、親要素の上端から最初のカードまでと、最後のカードから下端までの余白を1とすると、カード同士の間隔は2になります。
この記事では、縦方向の配置をspace-aroundで統一したまま、align-items:flex-start;、align-items:center;、align-items:flex-end;を使い分け、カードを左・中央・右へ配置する3パターンを紹介します。縦型メニューやリンク一覧、サイドバーなど、複数の項目を縦方向へ並べながら、各カードの上下に一定の余白を持たせたいレイアウトに活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
左に配置
中央に配置
右に配置
3つのパターンはいずれも、flex-direction:column;で5枚のカードを縦並びにし、justify-content:space-around;で各カードの上下に同じ量の余白を割り当てています。そのため、隣り合うカード間では上下の余白が合わさり、親要素の上端・下端の余白はカード間の間隔の半分になります。横方向は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-around_wrap">
<!-- 左に配置 -->
<div class="flexbox-column-space-around_item">
<div class="flexbox-column-space-around_method-title">
<code>align-items: flex-start;</code>
</div>
<div class="flexbox-column-space-around_container flexbox-column-space-around_container--left">
<div class="flexbox-column-space-around_card">1</div>
<div class="flexbox-column-space-around_card">2</div>
<div class="flexbox-column-space-around_card">3</div>
<div class="flexbox-column-space-around_card">4</div>
<div class="flexbox-column-space-around_card">5</div>
</div>
</div>
<!-- 中央に配置 -->
<div class="flexbox-column-space-around_item">
<div class="flexbox-column-space-around_method-title">
<code>align-items: center;</code>
</div>
<div class="flexbox-column-space-around_container flexbox-column-space-around_container--center">
<div class="flexbox-column-space-around_card">1</div>
<div class="flexbox-column-space-around_card">2</div>
<div class="flexbox-column-space-around_card">3</div>
<div class="flexbox-column-space-around_card">4</div>
<div class="flexbox-column-space-around_card">5</div>
</div>
</div>
<!-- 右に配置 -->
<div class="flexbox-column-space-around_item">
<div class="flexbox-column-space-around_method-title">
<code>align-items: flex-end;</code>
</div>
<div class="flexbox-column-space-around_container flexbox-column-space-around_container--right">
<div class="flexbox-column-space-around_card">1</div>
<div class="flexbox-column-space-around_card">2</div>
<div class="flexbox-column-space-around_card">3</div>
<div class="flexbox-column-space-around_card">4</div>
<div class="flexbox-column-space-around_card">5</div>
</div>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルは、HTMLファイルとCSSファイルの2つで構成されています。5枚のカードをflex-direction:column;で縦並びにし、justify-content:space-around;によって各カードの上下に同じ量の余白を割り当てています。左・中央・右の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-around;を使用しています。各カードの上下には同じ量の余白が割り当てられ、隣り合うカード間では上下の余白が合わさるため、親要素の上端・下端の余白はカード間の間隔の半分になります。横方向はalign-items:flex-start;で左、align-items:center;で中央、align-items:flex-end;で右へ配置されます。
カスタマイズできる内容
カード内の文字や内容は自由に変更できます。カードの枚数も変更できますが、枚数を増やす場合は、カードの高さと親要素の高さに合わせて調整してください。justify-content:space-around;では、それぞれのカードの上下に同じ量の余白が割り当てられるため、カード間には上下2つ分の余白ができます。横方向の位置を変更したい場合は、各コンテナーのalign-itemsを変更します。
レスポンシブ対応
Flexコンテナーの横幅にはwidth:100%;とmax-width:900px;を指定しているため、画面幅が狭くなると利用できる横幅に合わせて縮小します。カードは80pxの固定幅を保ち、左・中央・右の配置もそれぞれ維持されます。
コメント