個別アイテムの配置

align-self プロパティは、特定のフレックスアイテムの交差軸方向の配置を個別に制御するプロパティです。

このプロパティを使用することで、親コンテナの align-items の設定を上書きして、特定のアイテムだけ異なる配置にすることができます。

基本例

CSS
.flex-container {
  display: flex;
  align-items: flex-start; /* すべてのアイテムのデフォルト配置 */
  height: 150px;
}

.special-item {
  align-self: flex-end; /* この要素だけ下端に配置 */
}

アイテム 1

特別なアイテム
(align-self: flex-end)

アイテム 3

align-self の値

align-self プロパティは以下の値を取ることができます

auto（デフォルト）

親要素の align-items の値を継承します。align-self が明示的に指定されていない場合のデフォルト値です。

CSS
.flex-item {
  align-self: auto; /* 親のalign-itemsを継承 */
}

flex-start

アイテムを交差軸の開始位置に配置します。

CSS
.flex-item {
  align-self: flex-start;
}

flex-end

アイテムを交差軸の終了位置に配置します。

CSS
.flex-item {
  align-self: flex-end;
}

center

アイテムを交差軸の中央に配置します。

CSS
.flex-item {
  align-self: center;
}

baseline

アイテムのベースライン（文字のベースライン）を他のアイテムと揃えます。

CSS
.flex-item {
  align-self: baseline;
}

stretch

アイテムをコンテナの高さいっぱいに伸ばします。明示的な高さが設定されていない場合のみ効果があります。

CSS
.flex-item {
  align-self: stretch;
}

実用例

ナビゲーションバーのロゴ配置

ナビゲーションバーで、ロゴだけを中央に配置し、他の要素は上端に配置する場合

CSS
.navbar {
  display: flex;
  align-items: flex-start;
  height: 80px;
  padding: 10px 20px;
}

.logo {
  align-self: center; /* ロゴのみ中央配置 */
  font-size: 24px;
  font-weight: bold;
}

.nav-menu {
  margin-left: auto;
}

MyLogo

カードレイアウトでの価格表示

商品カードで、価格だけを下端に配置し、他の情報は上部から配置する場合

CSS
.product-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 200px;
  padding: 20px;
}

.product-title,
.product-description {
  /* align-items: flex-start を継承 */
}

.product-price {
  align-self: flex-end; /* 価格のみ右端に配置 */
  margin-top: auto;     /* 残りスペースを上に押し上げ */
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

スマートフォン

最新モデルの高性能スマートフォンです。

¥89,800

試してみよう

各アイテムの align-self を個別に設定して動作を確認してみましょう。

各アイテムのalign-selfを選択

アイテム 1:

アイテム 2:

アイテム 3:

1auto

2auto

3auto

演習課題

align-self を使って実用的なチャットアプリのレイアウトを作成してみましょう。

課題: チャットインターフェース

LLMとのチャットアプリのようなレイアウトを作成してください。人間のメッセージは右寄せ、AIの応答は左寄せに配置してください。

⛳目標レイアウト

Flexboxについて教えてください

Flexboxは、要素を効率的に配置・配布・整列させるためのCSSレイアウト手法です。特に1次元のレイアウト（行または列）に優れています。

align-selfはどう使うのですか？

align-selfは個別のアイテムの配置を制御できます。このチャットのように、人間のメッセージを右寄せ、AIのメッセージを左寄せにできます。

🎨Playground

HTML

CSS

プレビュー

解答例を見る

.chat-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.message {
  margin-bottom: 15px;
  max-width: 70%;
}

.ai-message {
  align-self: flex-start;
}

.human-message {
  align-self: flex-end;
}

基本例​

align-self の値​

auto（デフォルト）​

flex-start​

flex-end​

center​

baseline​

stretch​

実用例​

ナビゲーションバーのロゴ配置​

カードレイアウトでの価格表示​