【CSS】flexboxで縦並びにする方法

Flexbox（Flexible Box Layout）は現代のCSSの中で非常に重要なレイアウトモデルの一つです。WebページやアプリケーションのUIを効率的に、そして美しく配置する力を持っています。今日はその中でも、特に「縦並び」に焦点を当てて詳細に解説します。

Flexboxとは？
縦並びの基本設定
1. CSS
2. HTML
サンプルコード
追加のスタイリングオプション
まとめ

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;
}

これで、アイテムは縦方向の中央に配置され、コンテナの幅全体に広がります。

まとめ

Flexboxは非常に強力なレイアウトツールであり、縦並びも簡単に実装できます。基本設定から追加のスタイリングオプションまで、この記事で網羅的に説明しました。是非、自分のプロジェクトで試してみてください。