Display、Flex、Flex Direction
コンテナーでflexboxを有効にし、flex-directionで主軸の方向を制御します。
「Display、Flex、Flex Direction」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
Flexbox の有効化
コンテナ要素（flex コンテナ）に display: flex を設定すると、Flexbox が有効になります。その直接の子要素は自動的に flex アイテムになります。
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
インライン Flex
display: inline-flex は、ブロックとしてではなく inline-block のようにインラインで流れる flex コンテナを作成します。内部の Flexbox の動作は同じです。
<p>Status: <span class="badge">🔥 Trending</span></p>
主軸と交差軸
Flexbox には2つの軸があります。
- 主軸：アイテムが配置される主要な方向です
- 交差軸：主軸に対して垂直な軸です
すべての flex プロパティは、固定された方向ではなく、これらの軸を基準にします。
flex-direction: row（デフォルト）
デフォルトの方向は row です。アイテムは水平方向の主軸に沿って左から右へ配置されます。
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
flex-direction: column
flex-direction: column はアイテムを垂直方向に積み重ねます。主軸は垂直になり、交差軸は水平方向になります。
<div class="sidebar">
<div>Dashboard</div>
<div>Reports</div>
<div>Settings</div>
</div>
flex-direction: row-reverse
row-reverse は水平方向を反転します。アイテムは右から左へ配置され、主軸の開始位置は右側になります。
<nav class="rtl-nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
flex-direction: column-reverse
column-reverse はアイテムを下から上へ積み重ねます。最後のアイテムが上に表示されます。
<div class="chat-list">
<div>Hey there!</div>
<div>How are you?</div>
<div>Doing great, thanks!</div>
</div>
flex-direction はすべての flex プロパティに影響する
flex-direction を変更すると、justify-content の方向も変わります。方向が column の場合、justify-content は水平方向ではなく垂直軸に沿って整列します。
シンプルな水平方向のレイアウト
最も基本的な Flexbox の使用例である、ナビゲーション内のアイテムの中央揃えです。
<nav class="nav">
<div>Logo</div>
<a href="#">Home</a>
<a href="#">Pricing</a>
<a href="#">Contact</a>
</nav>
シンプルな垂直方向のレイアウト
カードのコンテンツを垂直方向と水平方向の両方で中央揃えにします。
<div class="card">
<h3>Welcome</h3>
<p>Centered content</p>
</div>
flex-flow の短縮記法
flex-flow は flex-direction と flex-wrap の短縮記法です。
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
確認問題
flex-direction: column が設定されている場合、justify-content はどの軸を制御しますか。
まとめ
コンテナに display: flex を設定すると、その子要素のための flex コンテキストが作成されます。flex-direction は主軸の方向を設定します。row は水平方向、column は垂直方向です。すべての flex の整列プロパティは、固定された左右・上下の方向ではなく、これらの軸を基準にします。
よくある質問
「Display、Flex、Flex Direction」レッスンは無料ですか？
はい。「Display、Flex、Flex Direction」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「Display、Flex、Flex Direction」で何を学びますか？
コンテナーでflexboxを有効にし、flex-directionで主軸の方向を制御します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「Display、Flex、Flex Direction」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Display、Flex、Flex Direction
- Justify-ContentとAlign-Items
- Flex WrapとAlign-Content
- Flex Grow、Shrink、Basis