Flexbox（Flexible Box Layout）は現代のCSSの中で非常に重要なレイアウトモデルの一つです。WebページやアプリケーションのUIを効率的に、そして美しく配置する力を持っています。今日はその中でも、特に「縦並び」に焦点を当てて詳細に解説します。
Flexboxとは？
FlexboxはCSS3から導入されたレイアウトモデルで、非常に柔軟な方法でコンテナとその子要素（フレックスアイテム）を配置できます。伝統的なfloatsやpositioningよりもはるかに直感的で、多くの場合、少ないコードで同じことが実現できます。
縦並びの基本設定
縦並びを実現する最も基本的なステップは以下の通りです。
- コンテナ要素に display: flex; を設定します。
- コンテナ要素に flex-direction: column; を設定して、子要素を縦方向に並べます。
CSS
/* コンテナのスタイル */
.container {
display: flex;
flex-direction: column;
}
/* 子要素（フレックスアイテム）のスタイル */
.item {
/* こちらは各アイテムのスタイリング */
}
HTML
<div class="container"> <div class="item">アイテム 1</div> <div class="item">アイテム 2</div> <div class="item">アイテム 3</div> </div>
サンプルコード
基本設定だけでなく、サンプルコードを使って実例を見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexbox 縦並びデモ</title>
<style>
.container {
display: flex;
flex-direction: column;
}
.item {
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="item">アイテム 1</div>
<div class="item">アイテム 2</div>
<div class="item">アイテム 3</div>
</div>
</body>
</html>
アイテム 1
アイテム 2
アイテム 3
追加のスタイリングオプション
flex-direction: column; に加えて、justify-content, align-items など他のFlexboxプロパティも使って、さらに詳細な調整が可能です。
- justify-content: center; を使用すると、縦方向の中央にアイテムを配置できます。
- align-items: stretch; を使用すると、アイテムがコンテナの幅全体に広がります。
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
これで、アイテムは縦方向の中央に配置され、コンテナの幅全体に広がります。
よくある質問（FAQ）
Q. CSSのFlexboxで縦並びにするには？
A. flex-direction: columnを設定します。デフォルト（row）は横並びです。flex-direction: column-reverseにすると逆順の縦並びになります。
Q. Flexboxの子要素を縦方向の中央に配置するには？
A. 親にdisplay: flex; flex-direction: column; justify-content: center;を設定します。横方向の中央にはalign-items: centerを使います。
Q. Flexboxで子要素を等間隔で縦に並べるには？
A. 親にdisplay: flex; flex-direction: column; justify-content: space-between;（または space-around/space-evenly）を設定します。親の高さを指定することが重要です。
まとめ
Flexboxは非常に強力なレイアウトツールであり、縦並びも簡単に実装できます。基本設定から追加のスタイリングオプションまで、この記事で網羅的に説明しました。是非、自分のプロジェクトで試してみてください。
