CSS Academy · レッスン

align-selfによるFlexアイテムの配置上書き

Q: 「align-selfによるFlexアイテムの配置上書き」で何を学びますか？

align-selfを使い、個々のFlexアイテムについてコンテナのalign-itemsを上書きします。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

align-selfを使い、個々のFlexアイテムについてコンテナのalign-itemsを上書きします。

レッスン 1/413 ステップ

「align-selfによるFlexアイテムの配置上書き」はCoddyKit上の無料CSS Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

align-self とは

align-self は、特定の flex アイテムについて、フレックスコンテナーの align-items 設定を上書きします。コンテナーではなく、個々のアイテムに適用します。

align-self の値

align-items と同じ値を指定できます。

auto — コンテナーの align-items を継承します（デフォルト）
flex-start — 交差軸の始点に揃えます
flex-end — 交差軸の終点に揃えます
center — 交差軸の中央に揃えます
stretch — 交差軸のサイズいっぱいに引き伸ばします
baseline — テキストのベースラインに揃えます

実践例

ほとんどの項目を中央揃えにし、最後のボタンだけを末尾に揃えるナビゲーションです。

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

1 つのアイテムだけを引き伸ばす

他のカードは内容に合わせたサイズにしながら、1 つのカードを高さ全体に引き伸ばします。

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

配置としての margin: auto

フレックスアイテムの auto マージンは、自身または兄弟要素を反対側へ押し出します。これは、中央揃えや空間の分配において align-self の強力な代替手段です。

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto による垂直方向の中央揃え

auto マージンは垂直方向にも機能します。列方向の flex コンテナー内で margin-top: auto を指定すると、要素が下端へ押し出されます。

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

ベースライン揃え

テキストのベースラインでアイテムを揃えると、サイズの異なるアイテム同士の読みやすい関係を保てます。

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto（デフォルト）

align-self: auto は、アイテムにコンテナーの align-items の値を使用させます。コンテナーのデフォルトから 外したい 場合にだけ、align-self を設定します。

交差軸と主軸

覚えておきましょう。align-self は常に交差軸に作用します。flex-direction: column の場合、交差軸は水平方向なので、align-self は左右の位置を制御します。

align-self と flex-grow の組み合わせ

よくあるパターンは、アイテムを伸ばして空間を埋めながら、交差軸方向の配置を上書きする方法です。

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Grid と Flexbox の配置

CSS Grid には、2D の配置を制御する align-self（行軸）と justify-self（列軸）があります。Flexbox の align-self は交差軸だけを制御するため、主軸には margin: auto を使用します。

確認問題

フレックスコンテナーに align-items: center が設定されています。1 つのアイテムだけを交差軸の上端に揃えるには、そのアイテムにどのプロパティを設定しますか。

対話的なレッスンで答える

まとめ

align-self は、個々のアイテムについてフレックスコンテナーの align-items を上書きします。特定の要素だけ配置パターンから外す場合に使用します。margin: auto は補完的なツールで、残りの空間を分配してアイテムをいずれかの軸に沿って押し出します。

無料で開始

AI チューターと学ぶ CSS — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 40
レッスン: 159

無料で学習を始めるコース全体を表示

よくある質問

「align-selfによるFlexアイテムの配置上書き」レッスンは無料ですか？

はい。「align-selfによるFlexアイテムの配置上書き」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「align-selfによるFlexアイテムの配置上書き」で何を学びますか？

align-selfを使い、個々のFlexアイテムについてコンテナのalign-itemsを上書きします。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「align-selfによるFlexアイテムの配置上書き」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← CSS Academyに戻る