---
title: "Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎"
description: "ボタンやメニューを横に並べたいのにうまくいかないと感じているCSSの初心者へ。Flexboxの考え方と主要なプロパティの使い方を、縦・横の整列が思い通りになるよう基礎からシンプルに説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/flexbox-term"
markdown: "https://giga-site.com/articles/flexbox-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎

ボタンを横に並べたい、メニューをきれいに整列させたい。そんなときに使うのがCSSのFlexboxです。Flexboxを使うと、要素を横並びや縦並びに気持ちよく整えられます。この記事では、その考え方の基礎を初めての方向けに説明します。

> Source HTML: https://giga-site.com/articles/flexbox-term
> Article index: https://giga-site.com/articles/index.md

## Flexboxとは

Flexboxとは、要素を一列に並べて配置するためのCSSのしくみです。親となる箱に「これはFlexboxにする」という指定をすると、その中の子要素が自動的に並べられます。

ふつう、HTMLの要素は上から下へ縦に積み重なっていきます。Flexboxを使うと、この並びを横方向に変えたり、並べたうえで間隔や位置を細かく整えたりできます。

ボタンの横並び、ナビゲーションメニュー、カードの整列など、日常的によく見るレイアウトの多くがFlexboxで作られています。

## 主軸と交差軸という考え方

Flexboxを理解する鍵が、主軸と交差軸という二つの方向です。主軸は子要素が並んでいく方向、交差軸はそれと直角に交わる方向を指します。

横並びにすると主軸は横方向になり、子要素は左から右へ並びます。このとき交差軸は縦方向で、上下の位置を整える基準になります。縦並びにすると、この主軸と交差軸の向きが入れ替わります。

「並ぶ向き（主軸）」と「それに直角な向き（交差軸）」を分けて考えると、要素を中央に寄せたり端に寄せたりする指定が頭に入りやすくなります。

## 実務ではどこで関係する？

Flexboxは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

Flexboxについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## Flexboxで横並びを作る手順

ボタンを横に並べる、といった基本的なレイアウトは、次の順で考えると組み立てやすくなります。

1. 並べたい要素を一つの親の箱でまとめる
2. 親の箱に「Flexboxにする」という指定を加える
3. 並ぶ向き（横並びか縦並びか）を決める
4. 主軸方向の寄せ方（左寄せ・中央・等間隔など）を指定する
5. 交差軸方向の寄せ方（上揃え・中央揃えなど）を指定して仕上げる

## Flexboxが得意なこと

Flexboxは、一列に並んだ要素の間隔や位置をまとめて整えるのが得意です。要素の数が増減しても、間隔を自動で調整してバランスを保ちやすいのが利点です。

また、子要素の幅を画面に合わせて伸び縮みさせることもできます。画面が狭いときは縮み、広いときは広がる、といった柔軟な配置を比較的少ない指定で実現できます。

## 作ったレイアウトを確認・共有する

Flexboxのレイアウトは、寄せ方や向きの指定を少し変えるだけで見た目が大きく変わります。意図どおりに並んでいるかは、実際にブラウザで表示して確かめるのが確実です。

ギガサイト便では、CSSを含むファイルやZIPをドロップすると共有URLが発行され、その表示を関係者に見てもらえます。同じURLのまま中身を差し替えられるので、寄せ方を調整しては共有して反応をもらう、という確認のやり取りを進めやすくなります。

## よくある質問

### Flexboxは何のために使いますか

要素を横並びや縦並びに整え、間隔や位置をきれいにそろえるために使います。ボタンの並びやメニュー、カードの整列など、一列に並べる配置の多くをFlexboxで実現できます。

### 主軸と交差軸の違いは何ですか

主軸は子要素が並んでいく方向、交差軸はそれと直角に交わる方向です。横並びなら主軸は横、交差軸は縦になります。並ぶ向きと、それに直角な向きを分けて考えると配置の指定が理解しやすくなります。

### 横並びと縦並びはどう切り替えますか

Flexboxには並ぶ向きを決める指定があり、それを変えることで横並びと縦並びを切り替えられます。向きを切り替えると主軸と交差軸の向きも入れ替わるため、寄せ方の指定も合わせて見直すと整います。

### FlexboxとCSS Gridはどう使い分けますか

Flexboxは一列の並びを整えるのが得意で、CSS Gridは行と列の両方を組み合わせた格子状のレイアウトが得意です。一方向に並べたいならFlexbox、縦横の格子で組みたいならGrid、と考えると選びやすいです。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [FlexboxとGridとは？レイアウトを整えるCSSの基礎](https://giga-site.com/articles/what-is-flexbox-grid/index.md)
- [CSSアニメーションとは？keyframesで動かす仕組みの基礎](https://giga-site.com/articles/css-animation-term/index.md)
- [position:stickyとは？スクロールで追従するヘッダーの基礎](https://giga-site.com/articles/sticky-header-term/index.md)
- [ダークモードとは？暗い配色に切り替える仕組みの基礎](https://giga-site.com/articles/dark-mode-term/index.md)
- [ミニファイ（minify）とは？ファイル圧縮の基礎](https://giga-site.com/articles/what-is-minify/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎",
  "description": "ボタンやメニューを横に並べたいのにうまくいかないと感じているCSSの初心者へ。Flexboxの考え方と主要なプロパティの使い方を、縦・横の整列が思い通りになるよう基礎からシンプルに説明します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/flexbox-term",
  "url": "https://giga-site.com/articles/flexbox-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Flexboxは何のために使いますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "要素を横並びや縦並びに整え、間隔や位置をきれいにそろえるために使います。ボタンの並びやメニュー、カードの整列など、一列に並べる配置の多くをFlexboxで実現できます。"
      }
    },
    {
      "@type": "Question",
      "name": "主軸と交差軸の違いは何ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "主軸は子要素が並んでいく方向、交差軸はそれと直角に交わる方向です。横並びなら主軸は横、交差軸は縦になります。並ぶ向きと、それに直角な向きを分けて考えると配置の指定が理解しやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "横並びと縦並びはどう切り替えますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Flexboxには並ぶ向きを決める指定があり、それを変えることで横並びと縦並びを切り替えられます。向きを切り替えると主軸と交差軸の向きも入れ替わるため、寄せ方の指定も合わせて見直すと整います。"
      }
    },
    {
      "@type": "Question",
      "name": "FlexboxとCSS Gridはどう使い分けますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Flexboxは一列の並びを整えるのが得意で、CSS Gridは行と列の両方を組み合わせた格子状のレイアウトが得意です。一方向に並べたいならFlexbox、縦横の格子で組みたいならGrid、と考えると選びやすいです。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```