Flexboxとは何か、そしてどのようにして它でコンテンツをセンタリングしますか？

Question

IT Interview Practice · Accepted Answer

**Flexbox** は1次元のレイアウトシステムです — 単一の**行**または**列**に項目を配置し、その行に沿ってスペースを分配します。これは、かつてfloatやハックを必要とした配置とスペーシングの問題に対する現代的な答えです。

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## 2つの軸

Flexboxには**メインアキシス**（項目が流れる方向）と**クロスアキシス**（垂直）があります。プロパティはそれらにマッピングされます：

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## 完璧なセンタリング — 有名なユースケース

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

これら3行は、子要素を水平方向と垂直方向の両方にセンタリングします — これはFlexboxの前では悪名高く難しいタスクでした。

## 一般的なパターン

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

`justify-content` のオプションには、`flex-start`、`center`、`flex-end`、`space-between`、`space-around`、`space-evenly` が含まれます。

## なぜ重要なのか

Flexboxはナビゲーションバー、ボタングループ、カード行、センタリング、および任意の「項目の行」レイアウトの日常的なツールです。

メイン/クロスアキシスモデルを理解すること（および `flex-direction` を変更すると `justify-content`/`align-items` の意味が交換されること）が、主な思考モデルです。

1DレイアウトにはFlexboxを、2DレイアウトにはGridを使用してください。

2つの軸

完璧なセンタリング — 有名なユースケース

一般的なパターン

なぜ重要なのか

関連する質問