ECサイトの商品一覧やブログのアーカイブページを作る際、以下のようなレイアウト実装で悩んだことはありませんか？
- カードを横並びにして、画面端に来たら自動で折り返したい。
- カードの中身（商品名や価格）の長さが違っても、リンクボタンは常に「右下」に揃えたい。
これらは、Flexboxのflex-wrap（折り返し）と、position: absolute（絶対配置）を組み合わせることで、美しく解決できます。
今回は、親要素と子要素それぞれにFlexboxを適用し、思い通りのグリッドレイアウトを作るコードを解説します。
コンテンツ
親要素（.wrap）：Flexboxで「折り返し」を指定する
まず、カードを包む大枠（親要素）の設定です。 通常、display: flex; を指定しただけだと、子要素は一行に無理やり詰め込まれてしまいます。
そこで、flex-wrap: wrap; を記述して、「入り切らなくなったら次の行へ」という折り返し指示を出します。
実装コード（親要素）
.wrap {
display: flex;
flex-direction: row; /* 左から右へ並べる */
flex-wrap: wrap; /* 折り返しを有効にする */
gap: 20px; /* カード間の余白（任意） */
}flexの並びを指定するプロパティ一覧
迷った時のためのチートシートです。
| プロパティ値 | 動き |
| row | 左から右に並べる（初期値） |
| row-reverse | 右から左に並べる |
| column | 上から下に並べる |
| column-reverse | 下から上に並べる |
| nowrap | 折り返さない（初期値・一行に収める） |
| wrap | 折り返す |
| wrap-reverse | 逆方向に折り返す |
子要素（.box）：カード内のレイアウトと「基準点」
次に、個々のカード（子要素）の設定です。 ここでもレイアウト調整のために display: flex; を使いつつ、中のリンクボタンを絶対配置するための基準点として position: relative; を指定します。
実装コード（子要素・孫要素）
/* カード本体 */
.box {
position: relative; /* リンクを配置するための基準点 */
display: flex; /* 画像とテキストを横並びにする時などに使用 */
flex-direction: column; /* 縦積みにする場合 */
width: 300px; /* 任意の幅 */
height: 400px; /* 任意の高さ */
border: 1px solid #ccc;
padding-bottom: 50px; /* リンクボタンが被らないように余白を確保 */
}
/* 右下に固定したいリンクボタン */
.link a {
position: absolute; /* 親（.box）を基準に配置 */
right: 0; /* 右端に揃える */
bottom: 0; /* 下端に揃える */
display: block; /* リンクをブロック要素にする */
padding: 10px 20px;
background: #333;
color: #fff;
}全体のHTML構造イメージ
このCSSを適用するHTMLは以下のようになります。
<div class="wrap">
<div class="box">
<img src="product.jpg" alt="商品画像">
<h3>商品タイトル（長くてもOK）</h3>
<p>¥1,000</p>
<div class="link">
<a href="#">詳細を見る</a>
</div>
</div>
<div class="box">
</div>
</div>まとめ ECサイト制作の鉄板パターン
- 大枠（.wrap）:
flex-wrap: wrap;で商品をタイル状に並べる。 - 個別の枠（.box）:
position: relative;で基準点を作る。 - ボタン（.link a）:
position: absolute;で右下に固定する。
この3点セットは、レスポンシブデザインでスマホ表示にする際も（flex-directionを調整するだけで済むため）非常に管理しやすい記述です。 レイアウト崩れにお悩みの際は、ぜひこの基本形を見直してみてください。
