CSSのflexとgridのまとめ

Last updated at 2025-08-02Posted at 2025-08-02

flex と grid のまとめ

css のレイアウトで柔軟な配置を可能にする display プロパティの値としてflexとgridについて自分用にまとめた.

1. Flexbox

一方向の整列 (横 or 縦)
ナビゲーションバー
要素の間隔を均等にしたい

2. Grid

2 次元レイアウト (行・列)
カードレイアウト (3 列など)
フォームのラベル + 入力欄
複雑なページ構成

3. Flexbox の例

3.1 ヘッダーやフッターの水平ナビゲーション

style.css

* {
  padding: 0;
  margin: 0;
}

.navi-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

ul {
  list-style: none;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Example01</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav>
      <ul class="navi-list">
        <li><a href="#">ホーム</a></li>
        <li><a href="#">サービス</a></li>
        <li><a href="#">会社情報</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </body>
</html>

3.2 中央ぞろえ (縦横)

style.css

* {
  padding: 0;
  margin: 0;
}

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

  width: 300px;
  height: 200px;

  background-color: #eee;
  border: 2px solid #ccc;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Example02</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="center-box">
      <p>中央のテキスト</p>
    </div>
  </body>
</html>

3.3 レスポンシブなボタンの配置

style.css

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Example03</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <form class="button-group" action="#">
      <button>買い物へ行く</button>
      <button>洗濯をする</button>
      <button>プログラミングをする</button>
      <button>散歩に行く</button>
    </form>

    <div class="button-group">
      <button>ホーム</button>
      <button>サービス</button>
      <button>会社情報</button>
      <button>お問い合わせ</button>
      <button>FAQ</button>
      <button>ブログ</button>
    </div>
  </body>
</html>

4. Grid の例

4.1 カード 3 列 (レスポンシブ対応)

スマホでは 1 列, タブレッドでは 2 列, PC では 3 列など自動調整させる.

style.css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;

  padding: 16px;
}

.card {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}

`grid-template-colums`

グリッドの列の幅の指定するプロパティ
この指定により Grid の列数または幅を指定する

`repat(...)`

同じパターンを繰り返すための構文
repeat(3, 100px)は100px 100px 100pxと同じ意味

`auto-fit`

利用可能なスペースにできるだけ多くの列を自動で詰め込む.
親要素の横幅が変わるたびに, 1 行に入るだけの列を作る.
似た言葉にauto-fillがあるが,こちらは見えない列も作り続けるという違いがある.

`minmax(200px, 1fr)`

1 つの列の最小幅と最大幅を指定する.
200px: 1 列の最小幅を 200px とする.
1fr: 1 列の最大幅は「利用可能な余白を分割して伸びる」という意味.
つまり, 1 つのカードの幅は 200px 以上で, 画面が広ければそれ以上に伸びて OK.

`1fr`

「利用可能な空間を 1 単位として分割する」という意味の長さ単位(fraction の略).
1fr 1fr 1frのように書くと, 3 列で同じ幅の分割となる.

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Example04</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>カードグリッド表示</h1>
  <div class="card-grid">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
    <div class="card">カード4</div>
    <div class="card">カード5</div>
    <div class="card">カード6</div>
  </div>
</body>

</html>

4.2 フォームのラベル + 入力欄の整列

style.css

.form-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px 16px;

  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

label {
  display: block;
  font-weight: bold;
}
input,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.form-grid button {
  grid-column: 2; /* ボタンを右側1列に揃える */
  padding: 10px 20px;
}

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Example04</title>
  <link rel="stylesheet" href="style.css">
</head>


<body>
  <form class="form-grid">
    <label for="name">名前</label>
    <input type="text" id="name" name="name" required>

    <label for="email">メール</label>
    <input type="email" id="email" name="email" required>

    <label for="message">メッセージ</label>
    <textarea id="message" name="message" rows="4" required></textarea>

    <button type="submit">送信</button>
  </form>
</body>

</html>

4.3 ページ全体の構造 (ヘッダー・メイン・サイドバー・フッター)

style.css

* {
  margin: 0;
  padding: 0;
}

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "siebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

header {
  grid-area: header;
  background-color: #4caf50;
  color: white;
  padding: 16px;
  text-align: center;
}

aside {
  grid-area: siebar;
  background-color: #f4f4f4;
  padding: 16px;
}

main {
  grid-area: main;
  padding: 16px;
  background-color: #fff;
}

footer {
  grid-area: footer;
  background-color: #ddd;
  text-align: center;
  padding: 12px;
}

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Example06</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="layout">
    <header>ヘッダー</header>
    <aside>サイドバー</aside>
    <main>メインコンテンツ</main>
    <footer>フッター</footer>
  </div>
</body>

</html>

5. 紛らわしいプロパティ

プロパティ名	`flex`	`grid`	`block` や `inline`	補足説明
`gap`	〇	〇	×	以前は Grid 限定だったが, 現在は Flex でもサポート.
`flex-direction`	〇	×	×	Flexbox だけで使う主軸の方向指定.デフォルトで`row`.
`justify-content`	〇	〇	×	主軸方向の整列. Grid ではグリッド全体の配置.
`align-items`	〇	〇	×	交差軸方向のアイテム揃え.
`align-content`	〇 (複数行のみ)	〇	×	コンテナ内で複数行の揃え(1 行では無意味).
`justiy-items`	×	〇	×	Grid のみ. 各セルの水平方向揃え.
`align-self`	〇	〇	×	個別のアイテムに適用する.
`order`	〇	×	×	Flex アイテムの並び順の変更. Grid は行列の指定があるのて不要.

gapのサポート状況
- 昔はgapは Grid 専用.
- 現在 (2020 以降のブラウザ)では Flexbox でもgapが使用可能.
- ただし, IE11 でがgapは非対応.

flex-directionとGrid
- Grid では方向の概念がFlexと異なる.
- Grid の行・列はgrid-template-columnsやgrid-template-rowsで定義する.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up