カードを上中央に配置するFlexboxの使い方
Flexboxを使って、親要素（Flexコンテナー）の上中央に複数のカードを配置する方法を紹介します。このサンプルでは、横幅と高さを持つ親要素の中に5枚のカードを横一列で並べ、まとまり全体を上側の中央へ配置します。親要素の範囲を枠線で表示しているため、カードが横方向の中央にまとまりながら、上側に配置されている状態を確認できます。
今回はflex-direction:row;の状態を前提として、justify-content:center;を指定して5枚のカードを主軸方向の中央へ配置する方法と、さらにalign-items:flex-start;を加えて交差軸の先頭側となる上側への配置を明示する方法の2種類を扱います。指定内容は異なりますが、今回のサンプル条件では、どちらの方法でも5枚のカードは同じ上中央の位置に表示されます。
上中央への配置は、横並びのメニューやカード一覧、会員サイトの選択項目、管理画面の操作項目など、複数の要素を中央へまとめながら上側から表示したいレイアウトで利用できます。HTMLではカードの内容や枚数を編集でき、CSSでは親要素やカードのサイズ、枠線などを調整できます。画面幅が狭い場合も5枚のカードが横一列を維持しながら縮小するため、スマートフォン・タブレット・PCで配置を確認できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
親要素（Flexコンテナー）
① justify-content:center;で上中央へ配置する方法
② align-items:flex-start;を加えて上側への配置を明示する方法
2種類は指定内容が異なりますが、今回の条件ではどちらの方法を使用しても5枚のカードは同じ上中央の位置に配置され、見た目の完成結果も同じになります。上側への配置を明示すると、縦方向のどこへ配置したいのかをコードから読み取りやすくなります。
コードをコピーして使おう！
<!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-top-center_page">
<!-- 方法1：justify-content:center;で上中央へ配置 -->
<div class="flexbox-top-center_method">
<!-- この方法で使用するFlexboxの指定 -->
<div class="flexbox-top-center_method-title">
<code>display:flex;<br>justify-content:center;</code>
</div>
<!-- 5つの子要素を配置する親要素（Flexコンテナー） -->
<div class="flexbox-top-center_container flexbox-top-center_method-1">
<!-- 親要素の中へ横一列で並べる5つの子要素（Flexアイテム） -->
<div class="flexbox-top-center_card">1</div>
<div class="flexbox-top-center_card">2</div>
<div class="flexbox-top-center_card">3</div>
<div class="flexbox-top-center_card">4</div>
<div class="flexbox-top-center_card">5</div>
</div>
</div>
<!-- 方法2：上側への配置も明示して上中央へ配置 -->
<div class="flexbox-top-center_method">
<!-- この方法で使用するFlexboxの指定 -->
<div class="flexbox-top-center_method-title">
<code>display:flex;<br>justify-content:center;<br>align-items:flex-start;</code>
</div>
<!-- 5つの子要素を配置する親要素（Flexコンテナー） -->
<div class="flexbox-top-center_container flexbox-top-center_method-2">
<!-- 親要素の中へ横一列で並べる5つの子要素（Flexアイテム） -->
<div class="flexbox-top-center_card">1</div>
<div class="flexbox-top-center_card">2</div>
<div class="flexbox-top-center_card">3</div>
<div class="flexbox-top-center_card">4</div>
<div class="flexbox-top-center_card">5</div>
</div>
</div>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは親要素（Flexコンテナー）の中に5つの子要素（Flexアイテム）を配置し、CSSではFlexboxを使って5枚のカードを横一列のまま上中央へ配置します。JavaScriptや外部ライブラリは使用せず、2種類のFlexbox指定による上中央配置を確認できる構成です。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlは、親要素と5枚のカードを構成するファイルです。方法1と方法2の2つのサンプルを用意しており、それぞれ同じ5枚のカードを使用して上中央への配置を確認できます。
style.cssは、親要素とカードのサイズや枠線、Flexboxによる配置を設定するファイルです。方法1ではdisplay:flex;とjustify-content:center;を指定し、方法2ではさらにalign-items:flex-start;を指定しています。2種類は指定内容が異なりますが、今回の条件ではどちらも同じ上中央の位置に表示されます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。方法1と方法2のそれぞれで、5枚のカードが親要素の上中央へ横一列で配置されます。
カスタマイズできる内容
index.htmlでは、カード内の「1」から「5」までの表示内容を変更できます。style.cssでは親要素やカードの横幅・高さ・枠線などを変更できます。また、今回のflex-direction:row;の状態では、justify-content:center;によって5枚のカードを主軸方向となる横方向の中央へ配置しています。方法2ではalign-items:flex-start;を追加し、交差軸の先頭側となる上側への配置も明示しています。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでは親要素にwidth:100%;とmax-width:900px;を指定し、画面幅に合わせて横幅が縮小する構成にしています。カードにはflex-shrink:1;を指定しているため、表示できる横幅が狭くなった場合も5枚のカードを横一列に維持しながら縮小します。スマートフォン・タブレット・PCで上中央の配置を確認できます。
コメント