Justify-ContentとAlign-Items
justify-contentとalign-itemsを使って、主軸と交差軸に沿ってアイテムを配置します。
「Justify-ContentとAlign-Items」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
2つの重要な整列プロパティ
Flex の整列で最もよく使われるプロパティは次の2つです。
justify-content— 主軸に沿ってアイテムを整列しますalign-items— 交差軸に沿ってアイテムを整列します
justify-content: flex-start
flex-start（デフォルト）は、主軸の開始位置に向かってアイテムを詰めて配置します。row 方向では、アイテムは左側に揃います。
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
justify-content: center
主軸に沿ってアイテムを中央揃えにします。Flexbox で水平方向に中央揃えする基本的な方法です。
<div class="hero">
<button>Get Started</button>
</div>
justify-content: flex-end
主軸の終端に向かってアイテムを詰めて配置します（row 方向では右側です）。
<div class="header">
<button>Sign In</button>
<button>Sign Up</button>
</div>
justify-content: space-between
アイテムの間に均等なスペースを配置します。最初のアイテムは開始位置に、最後のアイテムは終端に配置されるため、端にはスペースがありません。
<nav class="nav">
<div class="logo">Logo</div>
<div class="links">
<a href="#">Home</a>
<a href="#">About</a>
</div>
</nav>
justify-content: space-around
各アイテムの周囲に均等なスペースを配置します。端のアイテムにあるスペースは、内側のアイテム間のスペースの半分になります。見た目上、端のパディングはアイテム間の半分です。
justify-content: space-evenly
端を含むすべての間隔が均等になります。space-around とは異なり、端のパディングとアイテム間の間隔が等しくなります。
<div class="toolbar">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
align-items: stretch（デフォルト）
stretch（デフォルト）は、交差軸上のすべての flex アイテムをコンテナの交差軸方向のサイズいっぱいに広げます。row コンテナ内のアイテムは、すべて同じ高さになります。
<div class="row">
<div>Short</div>
<div>Taller content<br>spanning<br>multiple lines</div>
<div>Mid</div>
</div>
align-items: center
交差軸上でアイテムを中央揃えにします。row コンテナでは、アイテムが垂直方向に中央揃えされます。垂直方向の中央揃えに使う基本的な方法です。
<div class="card">
<span>👤</span>
<span>Jane Doe</span>
</div>
align-items: flex-start と flex-end
flex-start は交差軸の開始端（row では上端）にアイテムを揃えます。flex-end は交差軸の終端（row では下端）に揃えます。
<nav class="nav">
<div>Short</div>
<div>Taller<br>nav<br>item</div>
</nav>
align-items: baseline
テキストのベースラインが揃うようにアイテムを整列します。アイテムごとにフォントサイズが異なるものの、見た目上は揃えたい場合に便利です。
<nav class="breadcrumb">
<span style="font-size:12px">Home</span>
<span style="font-size:24px">Products</span>
<span style="font-size:16px">Item</span>
</nav>
確認問題
flex アイテムをコンテナ内で水平方向と垂直方向の両方に完全に中央揃えするには、どの組み合わせを使用しますか。
まとめ
justify-content は、flex-start、center、space-between などの値を使って主軸に沿ってアイテムを配置します。align-items は、stretch、center、flex-start などの値を使って交差軸上にアイテムを配置します。この2つを組み合わせることで、両方の軸における整列を制御できます。
よくある質問
「Justify-ContentとAlign-Items」レッスンは無料ですか？
はい。「Justify-ContentとAlign-Items」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Justify-ContentとAlign-Items」で何を学びますか？
justify-contentとalign-itemsを使って、主軸と交差軸に沿ってアイテムを配置します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Justify-ContentとAlign-Items」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Display、Flex、Flex Direction
- Justify-ContentとAlign-Items
- Flex WrapとAlign-Content
- Flex Grow、Shrink、Basis