Flexboxの向きと個別配置をマスターしよう｜flex-directionとalign-self徹底解説

「横並びにしたいのに縦になる…」「この要素だけ位置をずらしたい…」
Flexboxを使い始めると、そんな“小さなストレス”によく出会います。

その多くは flex-direction（並び方向） と align-self（1つだけの位置調整） を理解すると一気に解決します。

この記事では、

flex-directionで“要素が流れる向き”をコントロールする考え方
align-itemsとの違いも含めたalign-selfの実践的な使い方

を、初学者〜現場コーダー目線で整理していきます。

flexboxレイアウトの前提：主軸と交差軸を押さえる

まずは用語整理から。

Flexboxでは、要素が並ぶ方向を 「主軸（main axis）」、それと直交する方向を 「交差軸（cross axis）」 と呼びます。

主軸：flex-directionで決まる“並びの方向”
交差軸：主軸と直角の方向（align-items / align-selfが効く方向）

この2つを意識しておくと、あとで align-self を触るときにも迷いにくくなります。

flex-directionとは？値ごとのイメージ

flex-direction は、flexアイテムを主軸のどちら向きに並べるかを決めるプロパティです。

デフォルト値は row です。

　主な値と挙動

値	並び方向のイメージ
row	左 → 右（横並び・初期値）
row-reverse	右 → 左（横並びの逆順）
column	上 → 下（縦並び）
column-reverse	下 → 上（縦並びの逆順）

　基本コード例

<div class="flex">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.flex {
  display: flex;
  flex-direction: row; /* 必要に応じて row / column / row-reverse / column-reverse に変更 */
  gap: 16px;
}

　実務での使いどころ

PCでは row で横並び、スマホでは column にして縦積み
「新着が上」「重要なボタンを最後に」など、並び順をCSS側で制御したいときに row-reverse / column-reverse
フォームやLPの「縦に積んで読み下ろさせる」導線には column が素直

「HTMLの並び順は意味重視、見た目の順番はflex-directionで調整」という考え方にしておくと、SEOやアクセシビリティとの相性も良くなります。

align-itemsとalign-selfの違いを整理しよう

ここから本題の align-self。

その前に、親プロパティである align-items との関係を押さえておきます。

align-items：親要素に指定。全てのflexアイテムの“交差軸方向の揃え方”をまとめて決める。
align-self：子要素（flexアイテム）に指定。その要素“だけ”align-itemsの指定を上書きする。

つまり

align-items = 全員のルール
align-self = 特別扱いしたいやつ用ルール

align-selfを理解するカギは「交差軸方向だけに効く」という一点です。
主軸方向（並びの順番・左寄せ/右寄せ）を変えたいときは justify-content / order の領域になります。

align-selfの基本：指定できる値と意味

align-selfは各flexアイテムに対して次のように指定できます。

値	意味（交差軸方向でどう揃えるか）
auto	親のalign-itemsに従う（デフォルト）
flex-start	交差軸の開始側に寄せる
flex-end	交差軸の終端側に寄せる
center	交差軸の中央に揃える
baseline	テキストのベースラインを揃える
stretch	可能な範囲で伸ばしてフィットさせる（高さなどがautoのとき）

　交差軸の方向に注意！

交差軸の向きは flex-direction によって変わります。

flex-direction: row のとき
- 主軸：横
- 交差軸：縦（上↕下）
flex-direction: column のとき
- 主軸：縦
- 交差軸：横（左↔右）

なので、同じ align-self: flex-start; でも

row → 上寄せ
column → 左寄せ

というように“見た目の寄る方向”が変わります。

コードで理解するalign-self

　例1：1つだけ上揃えにする

<div class="flex">
  <div class="item">Box 1</div>
  <div class="item special">Box 2</div>
  <div class="item">Box 3</div>
</div>

.flex {
  display: flex;
  align-items: center; /* 全体は縦中央揃え */
  height: 200px;
}

.item {
  padding: 16px;
  background: #eee;
}

.special {
  align-self: flex-start; /* この要素だけ上に寄せる */
}

ポイント

全体は中央寄せだが、特定の要素だけ“動き”をつけたいときに便利。

　例2：右端だけボタン位置を揃える（columnレイアウト）

カードを縦積みして、右端にだけCTAボタンを揃えたいケース。

<div class="card-list">
  <div class="card">
    <p>プランAの説明テキスト…</p>
    <a href="#" class="btn">詳しく見る</a>
  </div>
  <div class="card">
    <p>プランBの説明テキストが少し長い場合…</p>
    <a href="#" class="btn align-right">詳しく見る</a>
  </div>
</div>

.card-list {
  display: flex;
  flex-direction: column; /* 縦に積む */
  gap: 16px;
}

.card {
  display: flex;
  flex-direction: column; /* カード内も縦 */
  padding: 16px;
  border: 1px solid #ddd;
}

.btn {
  margin-top: 12px;
  align-self: flex-start; /* デフォルトは左寄せ */
}

.btn.align-right {
  align-self: flex-end; /* このボタンだけカード右寄せ */
}

ポイント

flex-direction: column なので flex-end は「下」ではなく「右」。
「交差軸がどっちを向いてるか」を毎回意識すれば混乱しません。

　例3：ラベルとテキストをベースラインで揃える

<div class="flex">
  <span class="label">Price</span>
  <span class="value big">¥12,800</span>
</div>

.flex {
  display: flex;
  align-items: flex-end;
}

.label {
  font-size: 14px;
}

.value.big {
  font-size: 32px;
  align-self: baseline; /* 数字の下端で揃える */
}

UIの細かい“ズレ感”を消したいとき、baseline 指定はかなり使えます。

align-selfでハマりやすいポイント

実装時によくあるつまずきを先に潰しておきます。

親に display: flex; がない
- 当たり前ですがflexコンテナでないと効きません。
高さ・幅が自動すぎて見た目の差が出ない
- stretch を使うときは、親に高さがあるかを確認。
flex-directionと逆にイメージしている
- 「flex-startなのに右に行かない？」→column指定になってないか確認。
inline要素にそのまま指定している
- 必要に応じて display: inline-flex; やラッパーを使う。

実務での使い分けの指針

最後に、「いつalign-selfを使うべき？」という目線でまとめます。

まずはalign-itemsで全体ルールを作る
- ヘッダーメニュー、カード群、ボタン行など、基本は揃える。
「この1つだけ」を動かしたいときにalign-self
- 強調ボタン
- ラベル
- アイコン
- フォームの注意書きなど
レイアウト崩れをalign-selfで“力技修正”しない
- 根本原因（余白設計、フォントサイズ、flex-directionミス）を直した方がきれいなCSSになる。

この2段構えで考えると、Flexboxレイアウトがかなりスッキリ整理できます。