CSS Academy · レッスン

Flexショートハンドのパターン

Flexショートハンドを使いこなし、flex: 1、flex: none、flex: autoなどの一般的な値を理解します。

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

flex 短縮記法の再確認

flex の短縮記法を使うと、flex-grow、flex-shrink、flex-basis を 1 つの宣言で設定できます。実際のレイアウトで使いこなすには、短縮記法の各バリエーションを理解することが重要です。

flex: 1

flex: 1 は flex: 1 1 0% と同じ意味です。項目は基準サイズ 0 から始まり、利用可能な空間を埋めるように均等に伸長します。これは、均等なカラムを作成する際に最もよく使われる短縮記法です。

<div class="equal-cols">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: auto

flex: auto = flex: 1 1 auto です。項目は本来のコンテンツサイズから始まり、その後、比率に応じて伸長または縮小します。伸長時には、幅の広いコンテンツほど多くの空間を取得します。

<div class="nav-links">
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
</div>

flex: none

flex: none = flex: 0 0 auto です。項目は固定され、伸長も縮小もしません。サイズは本来のコンテンツ幅、または明示的に指定した width/height によって決まります。

<div class="row">
  <div class="logo">Logo</div>
  <div>Flexible content</div>
</div>

flex: 0 0 Xpx

固定サイズで、flex による伸縮をしない項目です。正確な幅のサイドバーパネルを作成する場合に、最も明示的な方法です。

<div class="layout">
  <div class="sidebar-left">Left</div>
  <div class="main-content">Main</div>
  <div class="sidebar-right">Right</div>
</div>

flex: 1 と flex: 1 1 auto

重要な違いは次のとおりです。flex: 1（基準サイズ 0%）では、すべての項目が 0 から始まり、比例して伸長します。flex: 1 1 auto では、項目は本来のコンテンツサイズから始まり、その後伸長します。この違いは、残りの空間がどのように配分されるかに影響します。

flex: 2 の比率

比例配分を行うには、flex-grow に異なる値を指定します。

<div class="split">
  <div class="main">Main (2/3)</div>
  <div class="side">Side (1/3)</div>
</div>

固定項目と柔軟な項目の組み合わせ

実際の開発で最もよく使われるパターンは、固定幅のサイドバーと柔軟なメインコンテンツの組み合わせです。

<div class="layout">
  <div class="sidebar">Sidebar 280px</div>
  <div class="content">Flexible content</div>
</div>

min-width: 0 の flex テクニック

Flex 項目のデフォルト値は min-width: auto です。そのため、コンテンツサイズより小さく縮小できないことがあります。自由に縮小させたい項目（省略表示するテキストコンテナーなど）には、min-width: 0 を設定します。

<div class="row">
  <div class="text-col">This is a very long line of text that needs to truncate with an ellipsis inside a flex item.</div>
</div>

カードグリッドのパターン

柔軟でありながらサイズに上限を設けたカードによるレスポンシブなカードグリッドです。

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

flex 短縮記法のデバッグ

ブラウザーの DevTools で、計算後の flex-grow、flex-shrink、flex-basis の値を確認します。Flexbox インスペクターのオーバーレイを使うと、空き領域と項目のサイズも視覚的に確認できます。

確認問題

flex: auto は何に展開されますか。

まとめ

重要な flex 短縮記法を覚えておきましょう。flex: 1 は 0 から始まる均等なカラム、flex: auto は本来のサイズから伸長、flex: none は固定、flex: 0 0 Xpx は固定サイズを表します。省略表示するテキストを含む flex の子要素には、min-width: 0 を使用します。固定項目と柔軟な項目を組み合わせると、典型的なサイドバーレイアウトを作成できます。

よくある質問

「Flexショートハンドのパターン」レッスンは無料ですか？

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

「Flexショートハンドのパターン」で何を学びますか？

Flexショートハンドを使いこなし、flex: 1、flex: none、flex: autoなどの一般的な値を理解します。ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Flexショートハンドのパターン」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← CSS Academyに戻る