CSSのflexで横並びを簡単に！初心者でもすぐできる使い方とポイント

CSS

「画像やボタンを横に並べたいのに、うまくいかない…」

「floatやinline-blockは崩れやすくて面倒」

そんな悩みはありませんか？

今やCSSで要素を横並びにするなら、**flex（フレックス）**が最も簡単でおすすめです。

この記事では、flexを使って横並びにする基本から、よくあるトラブルの解決方法まで、コピペで使えるコード例とともにわかりやすく解説します。

スポンサーリンク

CSSのflexとは？横並びが驚くほど簡単に

flexの基本的な仕組み

flex（正式にはFlexbox）は、複数の要素を簡単に横並びや縦並びに配置できるCSSの仕組みです。

従来の方法の問題点：

  • float：clearfixが必要、高さが揃わない
  • inline-block：要素間に隙間ができる、縦揃えが困難
  • table-cell：テーブルレイアウトなので意味的におかしい

flexの利点：

  • たった1行で横並びが実現
  • 高さが自動で揃う
  • 中央揃えも簡単
  • レスポンシブ対応が楽

なぜflexがおすすめなのか

現在のWeb制作では、flexは横並びレイアウトの標準的な方法になっています。

理由は以下の通りです：

  • ブラウザサポートが充実（IE11以降で対応）
  • コードがシンプルで保守しやすい
  • 予期しない崩れが起きにくい
  • アニメーションとの相性も良い

flexで横並びにする基本の書き方

最低限これだけでOK

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

基本のCSS：

.container {
  display: flex;
}

これだけで、.container の中にある子要素は自動的に横並びになります。

具体的なHTMLとCSSの例

HTML：

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

CSS：

.container {
  display: flex;
}

.item {
  background: #e3f2fd;
  padding: 15px 20px;
  margin: 5px;
  border-radius: 4px;
  border: 1px solid #90caf9;
}

結果： これで3つのボックスがきれいに横一列に並びます。

実際によくある使用例

ナビゲーションメニューの横並び

HTML：

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

CSS：

.nav {
  display: flex;
}

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

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

ボタンの横並び

HTML：

<div class="button-group">
  <button class="btn btn-primary">保存</button>
  <button class="btn btn-secondary">キャンセル</button>
  <button class="btn btn-danger">削除</button>
</div>

CSS：

.button-group {
  display: flex;
  gap: 10px; /* ボタン間の間隔 */
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn-primary { background: #007bff; color: white; }
.btn-secondary { background: #6c757d; color: white; }
.btn-danger { background: #dc3545; color: white; }

よく使う横並びのオプション

横方向の位置を調整する

横中央寄せ

説明： justify-content: center; で、子要素全体を中央に配置します。

CSS：

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

使用例：

<div class="container">
  <button>ボタン1</button>
  <button>ボタン2</button>
</div>

右寄せ

CSS：

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

左右に均等配置

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

CSS：

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

使用例：

<header class="header">
  <div class="logo">ロゴ</div>
  <nav class="nav">メニュー</nav>
  <div class="user">ユーザー</div>
</header>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

その他の配置オプション

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

/* 全ての間隔を完全に均等に */
.container {
  display: flex;
  justify-content: space-evenly;
}

縦方向の位置を調整する

縦中央揃え

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

CSS：

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

その他の縦位置オプション

/* 上揃え（デフォルト） */
.container {
  display: flex;
  align-items: flex-start;
}

/* 下揃え */
.container {
  display: flex;
  align-items: flex-end;
}

/* ベースライン揃え */
.container {
  display: flex;
  align-items: baseline;
}

要素間の間隔を調整する

gapプロパティで簡単に間隔設定

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

CSS：

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

従来のmarginとの比較：

/* 従来の方法（面倒） */
.item {
  margin-right: 20px;
}
.item:last-child {
  margin-right: 0;
}

/* flexのgap（簡単） */
.container {
  display: flex;
  gap: 20px;
}

よくあるトラブルと解決法

トラブル1：横幅がはみ出る

問題： 子要素が多いと、画面からはみ出すことがあります。

解決方法： flex-wrap: wrap; を使って折り返しを有効にします。

CSS：

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

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

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 class="item">アイテム5</div>
</div>

これで横幅が足りなくなったら自動的に次の行に折り返してくれます。

トラブル2：要素の高さが揃わない

問題： 子要素の高さがバラバラになってしまう。

解決方法： flexでは自動的に高さが揃いますが、明示的に指定したい場合は align-items: stretch; を使用します。

CSS：

.container {
  display: flex;
  align-items: stretch; /* デフォルトで有効 */
}

.item {
  background: #e3f2fd;
  padding: 20px;
  /* heightを指定しなくても自動で揃う */
}

トラブル3：特定の要素だけ幅を調整したい

問題： 一部の要素だけ幅を大きくしたり、固定したりしたい。

解決方法： flex プロパティを使って個別に調整します。

CSS：

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

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

.item-fixed {
  width: 200px; /* 固定幅 */
}

.item-flexible {
  flex: 1; /* 残りのスペースを使用 */
}

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

HTML：

<div class="container">
  <div class="item item-fixed">固定幅</div>
  <div class="item item-flexible">可変1</div>
  <div class="item item-double">可変2（2倍）</div>
</div>

トラブル4：レスポンシブ対応

問題： スマホでは縦並びにしたい。

解決方法： メディアクエリで flex-direction を変更します。

CSS：

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

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

実用的な横並びパターン集

パターン1：画像とテキストの横並び

HTML：

<div class="media">
  <img src="avatar.jpg" alt="アバター" class="media-image">
  <div class="media-content">
    <h3>ユーザー名</h3>
    <p>プロフィール説明文がここに入ります。</p>
  </div>
</div>

CSS：

.media {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.media-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.media-content {
  flex: 1;
}

.media-content h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.media-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

パターン2：カード型レイアウト

HTML：

<div class="card-container">
  <div class="card">
    <img src="image1.jpg" alt="画像1" class="card-image">
    <div class="card-content">
      <h3>カードタイトル1</h3>
      <p>カードの説明文です。</p>
    </div>
  </div>
  <div class="card">
    <img src="image2.jpg" alt="画像2" class="card-image">
    <div class="card-content">
      <h3>カードタイトル2</h3>
      <p>カードの説明文です。</p>
    </div>
  </div>
  <div class="card">
    <img src="image3.jpg" alt="画像3" class="card-image">
    <div class="card-content">
      <h3>カードタイトル3</h3>
      <p>カードの説明文です。</p>
    </div>
  </div>
</div>

CSS：

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

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
  min-width: 250px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
}

.card-content h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.card-content p {
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .card-container {
    flex-direction: column;
  }
  
  .card {
    min-width: auto;
  }
}

パターン3：フォーム要素の横並び

HTML：

<form class="search-form">
  <input type="text" placeholder="検索キーワード" class="search-input">
  <select class="search-category">
    <option>カテゴリー選択</option>
    <option>技術</option>
    <option>デザイン</option>
  </select>
  <button type="submit" class="search-button">検索</button>
</form>

CSS：

.search-form {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin: 20px auto;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-category {
  width: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.search-button:hover {
  background: #0056b3;
}

/* スマホ対応 */
@media (max-width: 480px) {
  .search-form {
    flex-direction: column;
  }
  
  .search-category,
  .search-button {
    width: 100%;
  }
}

まとめ：flexで横並びレイアウトをマスターしよう

CSSのflexを使えば、横並びレイアウトが驚くほど簡単に実現できます。

基本の3ステップ

  1. 親要素に display: flex; を指定
  2. 必要に応じて justify-content で横方向の位置調整
  3. flex-wrap や gap でレイアウトを微調整

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

シンプルな横並び：

.container {
  display: flex;
}

中央寄せの横並び：

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

両端寄せの横並び：

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

レスポンシブ対応の横並び：

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

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

flexの主なメリット

  • たった1行で横並びが実現
  • 高さが自動で揃う
  • 中央寄せや両端寄せも簡単
  • レスポンシブ対応が楽
  • コードがシンプルで保守しやすい

こんな場面で活用しよう

  • ナビゲーションメニューの作成
  • ボタンの横並び配置
  • カード型レイアウト
  • フォーム要素の整列
  • 画像とテキストの組み合わせ

Youtube

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

スポンサーリンク

コメント

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