初心者でもわかるCSSのflex｜基本の使い方と便利テクニック

CSS

「レイアウトをきれいに並べたいのに、floatやpositionでは崩れやすい…」

「もっと簡単に横並びや中央寄せをしたい」

そんなときに大活躍するのがCSSの**flex（フレックス）**です。

flexを使えば、HTML要素を簡単に整列でき、レスポンシブデザインにも強いので、今やWebサイト作りには欠かせない技術です。

この記事では、CSSのflexの基本的な使い方から、知っておくと便利なプロパティまで、初心者にもわかりやすく解説します。

スポンサーリンク

flexとは？従来のレイアウトの悩みを一発解決

Flexboxの基本概念

flex（正式にはFlexbox）は、HTML要素を**「箱（コンテナ）」の中で柔軟に配置**できるレイアウト方法です。

横並びや縦並び、中央揃えなどがCSSの数行で簡単にできます。

従来のレイアウト方法の問題点

昔はfloatやinline-blockを駆使してレイアウトを作っていましたが、こんな課題がありました：

floatの問題

  • 高さが揃わない要素ができる
  • clearfixが必要で面倒
  • レスポンシブ対応が困難

inline-blockの問題

  • 要素間に隙間ができる
  • 縦の中央揃えが困難
  • 文字サイズに影響される

positionの問題

  • 要素が重なりやすい
  • レスポンシブ時に崩れる
  • コードが複雑になる

flexを使うメリット

flexを使うと、これらの問題が驚くほど簡単に解決できます：

  • 横並び・縦並びが1行で可能
  • 中央揃えも簡単
  • レスポンシブに自動対応
  • コードがシンプルで読みやすい

では実際に、どのようにflexを使うのか、基本の書き方から見ていきましょう。

CSS flexの基本の使い方

最低限これだけ覚えよう

横並びにする

説明： 親要素に display: flex; を指定するだけで、子要素が自動的に横並びになります。

コード例：

.container {
  display: flex;
}

HTML例：

<div class="container">
  <div class="item">アイテム1</div>
  <div class="item">アイテム2</div>
  <div class="item">アイテム3</div>
</div>

これだけで、3つのアイテムが横に並びます。

縦並びにしたいとき

説明： flex-direction: column; を追加すると、子要素が縦方向に並びます。

コード例：

.container {
  display: flex;
  flex-direction: column;
}

デフォルトは flex-direction: row;（横並び）なので、縦並びにしたいときだけ指定します。

横中央揃え

説明： justify-content: center; で、子要素を横方向の中央に揃えます。

コード例：

.container {
  display: flex;
  justify-content: center;
}

縦中央揃え

説明： align-items: center; で、子要素を縦方向の中央に揃えます。

コード例：

.container {
  display: flex;
  align-items: center;
  height: 200px; /* 高さが必要 */
}

横・縦ともに中央揃え

説明： 上記2つを組み合わせれば、完全な中央揃えができます。

コード例：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

この方法は、ローディング画面やモーダルウィンドウでよく使われます。

flexの方向を理解しよう

flexには「主軸（メイン軸）」と「交差軸（クロス軸）」という概念があります。

横並び（flex-direction: row）の場合

  • 主軸：横方向（左右）
  • 交差軸：縦方向（上下）
  • justify-content：主軸（横）の配置
  • align-items：交差軸（縦）の配置

縦並び（flex-direction: column）の場合

  • 主軸：縦方向（上下）
  • 交差軸：横方向（左右）
  • justify-content：主軸（縦）の配置
  • align-items：交差軸（横）の配置

この概念を理解すると、flexがもっと使いやすくなります。

よく使うflexの便利プロパティ

子要素の間隔を調整する

両端揃え

説明： justify-content: space-between; で、最初と最後の要素を両端に配置し、間の要素を均等に配置します。

コード例：

.container {
  display: flex;
  justify-content: space-between;
}

使用例： ナビゲーションメニューやフッターでよく使われます。

その他の間隔調整

/* 全ての要素の周りに均等な余白 */
.container {
  display: flex;
  justify-content: space-around;
}

/* 全ての要素を完全に均等配置 */
.container {
  display: flex;
  justify-content: space-evenly;
}

子要素を折り返す

説明： 横幅が足りないときに自動で改行したい場合は flex-wrap: wrap; を使います。

コード例：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 要素間の隙間 */
}

.item {
  width: 200px;
  height: 100px;
  background: #e0e0e0;
}

HTML例：

<div class="container">
  <div class="item">カード1</div>
  <div class="item">カード2</div>
  <div class="item">カード3</div>
  <div class="item">カード4</div>
</div>

コンテナの幅が400px以下になると、カードが2段に分かれます。

子要素ごとの幅を柔軟に調整

均等な幅にする

説明： flex: 1; を指定すると、余ったスペースを均等に分けます。

コード例：

.container {
  display: flex;
}

.item {
  flex: 1; /* 余白を均等に分ける */
  padding: 20px;
  background: #f0f0f0;
  margin: 5px;
}

特定の要素だけ大きくする

説明： 数値を変えることで、幅の比率を調整できます。

コード例：

.container {
  display: flex;
}

.item-small {
  flex: 1; /* 基本サイズ */
}

.item-large {
  flex: 2; /* 他の要素の2倍の幅 */
}

固定幅と可変幅の組み合わせ

説明： 一部の要素を固定幅にして、残りを可変にする方法です。

コード例：

.container {
  display: flex;
}

.sidebar {
  width: 200px; /* 固定幅 */
  background: #ddd;
}

.main-content {
  flex: 1; /* 残りのスペースを全て使用 */
  background: #fff;
  padding: 20px;
}

gapプロパティで簡単に間隔調整

説明： gap プロパティを使うと、子要素間の間隔を一括で指定できます。

コード例：

.container {
  display: flex;
  gap: 20px; /* 全ての要素間に20pxの間隔 */
}

/* 縦と横で違う間隔にしたい場合 */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px; /* 縦10px、横20px */
}

従来は margin で調整していた間隔が、gap で簡単に設定できます。

実例：よく使うレイアウトパターン

パターン1：簡単なカードレイアウト

HTML：

<div class="card-container">
  <div class="card">
    <h3>カード1</h3>
    <p>カードの説明文です。</p>
  </div>
  <div class="card">
    <h3>カード2</h3>
    <p>カードの説明文です。</p>
  </div>
  <div class="card">
    <h3>カード3</h3>
    <p>カードの説明文です。</p>
  </div>
</div>

CSS：

.card-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  flex: 1;
  min-width: 250px; /* 最小幅を指定 */
}

.card h3 {
  margin-top: 0;
  color: #333;
}

パターン2：ヘッダーナビゲーション

HTML：

<header class="header">
  <div class="logo">ロゴ</div>
  <nav class="nav">
    <a href="#" class="nav-item">ホーム</a>
    <a href="#" class="nav-item">サービス</a>
    <a href="#" class="nav-item">会社概要</a>
    <a href="#" class="nav-item">お問い合わせ</a>
  </nav>
</header>

CSS：

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

.nav {
  display: flex;
  gap: 30px;
}

.nav-item {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-item:hover {
  background-color: #f8f9fa;
}

パターン3：センター配置のローディング画面

HTML：

<div class="loading-overlay">
  <div class="loading-content">
    <div class="spinner"></div>
    <p>読み込み中...</p>
  </div>
</div>

CSS：

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-content {
  background: white;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

パターン4：レスポンシブ対応のグリッドレイアウト

HTML：

<div class="responsive-grid">
  <div class="grid-item">アイテム1</div>
  <div class="grid-item">アイテム2</div>
  <div class="grid-item">アイテム3</div>
  <div class="grid-item">アイテム4</div>
  <div class="grid-item">アイテム5</div>
  <div class="grid-item">アイテム6</div>
</div>

CSS：

.responsive-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background: #e3f2fd;
  padding: 30px;
  text-align: center;
  border-radius: 8px;
  flex: 1 1 300px; /* 基本300px、柔軟に伸縮 */
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* タブレット以下では2列 */
@media (max-width: 768px) {
  .grid-item {
    flex: 1 1 calc(50% - 10px);
  }
}

/* スマホでは1列 */
@media (max-width: 480px) {
  .grid-item {
    flex: 1 1 100%;
  }
}

flexでレスポンシブデザインを作る

基本的なレスポンシブパターン

説明： flexは自動的にレスポンシブ対応してくれますが、メディアクエリと組み合わせることでより細かい制御が可能です。

コード例：

.container {
  display: flex;
  gap: 20px;
}

.item {
  flex: 1;
  padding: 20px;
  background: #f0f0f0;
}

/* タブレット以下では縦並び */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

flexの順序を変更する

説明： order プロパティを使うと、HTMLの順序を変えずに表示順序を変更できます。

コード例：

.container {
  display: flex;
}

.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }

/* スマホでは元の順序に戻す */
@media (max-width: 480px) {
  .item-1, .item-2, .item-3 {
    order: 0;
  }
}

まとめ：flexをマスターして効率的なレイアウト作成を

CSSのflex（Flexbox）は、現代のWebデザインに欠かせない技術です。

覚えておきたい基本パターン

横並び：

.container {
  display: flex;
}

中央揃え：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

均等配置：

.container {
  display: flex;
  justify-content: space-between;
}

レスポンシブ対応：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1 1 300px;
}

flexの主なメリット

  • 横並び・縦並びが簡単にできる
  • 中央揃えがたったの2行で実現
  • レスポンシブ対応が自動的
  • 余白の均等配置も簡単
  • コードがシンプルで保守しやすい

こんな場面で活用しよう

  • ナビゲーションメニューの作成
  • カードレイアウトの整列
  • フォーム要素の配置
  • フッターの要素配置
  • モーダルウィンドウの中央配置

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました