Frontend Academy · レッスン

Flexbox徹底入門: 配置、折り返し、順序

justify-content、align-items、align-self、flex-wrap、flex-grow、flex-shrink、flex-basis、orderプロパティを使いこなします。

「Flexbox徹底入門: 配置、折り返し、順序」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

復習：FlexコンテナーとFlexアイテム

まとめ：コンテナーにdisplay: flexを設定すると、直接の子要素がFlexアイテムになります。主軸はflex-directionに沿って伸びます。交差軸は主軸に垂直です。

justify-contentの値の詳細

row方向のコンテナーで使用できるjustify-contentの値は、flex-start（デフォルト）、flex-end、center、space-between（アイテム間だけに間隔を設定）、space-around（各アイテムの周囲に等しい余白を設定）、space-evenly（すべての間隔を均等に設定）です。

.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around   { justify-content: space-around; }
.space-evenly   { justify-content: space-evenly; }
.center         { justify-content: center; }

align-itemsとalign-content

align-itemsは1行の中でアイテムを整列します。align-contentは複数行を整列します（flex-wrapがwrapで、複数の行がある場合にのみ機能します）。

.single-line { display: flex; align-items: center; }

.multi-line {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between; /* space between rows */
}

個々のアイテムに対するalign-self

align-selfは、特定のFlexアイテムに対してalign-itemsを上書きします。ほかのアイテムを中央揃えにしながら、1つのアイテムだけを引き伸ばす場合などに便利です。

.container { display: flex; align-items: center; height: 200px; }
.card { background: #e2e8f0; padding: 16px; }
.card.stretch { align-self: stretch; } /* overrides center */

flex-wrap: wrapとwrap-reverse

flex-wrap: wrapを使うと、アイテムを新しい行へ折り返せます。wrap-reverseは折り返しの方向を逆にします。gapと組み合わせると、シンプルなレスポンシブグリッドを作成できます。

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card-grid > * {
  flex: 1 1 280px; /* grow, shrink, min-width */
  max-width: 400px;
}

flex-grow、flex-shrink、flex-basis

アイテムに設定する3要素のflex短縮プロパティです。flex-growは利用可能な空間の分配比率、flex-shrinkは空間が足りないときの縮小率、flex-basisは拡大・縮小する前の初期サイズを表します。

.sidebar { flex: 0 0 250px; }  /* don't grow, don't shrink, 250px */
.main    { flex: 1 1 0%; }     /* grow to fill, shrink, no base */
.fixed   { flex: 0 0 100px; }  /* fixed 100px */

よく使うflex短縮記法

flex: 1は1 1 0%と同じです。flex: autoは1 1 auto、flex: noneは0 0 auto、flex: 2は2 1 0%と同じです（flex: 1の2倍の空間を使用します）。

orderプロパティ

orderはHTMLを変更せずにFlexアイテムの表示順を変更します。デフォルト値は0です。負の値を指定したアイテムは0より前に表示されます。表示順とDOMの順序が一致しないと、キーボードやスクリーンリーダーのユーザーが混乱するため、慎重に使用してください。

.sidebar { order: -1; }  /* appears first visually regardless of DOM order */
.main    { order: 0; }   /* default */

オーバーフローを解決するmin-width: 0

Flexアイテムには暗黙的にmin-width: autoが設定されるため、コンテンツのサイズより小さく縮小されません。min-width: 0を設定すると、さらに小さく縮小できるようになります。Flexアイテム内でテキストを省略表示するには不可欠です。

.flex-item {
  min-width: 0;  /* allows shrinking below content size */
}
.flex-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

gapを使わないFlexの間隔設定

gapに対応していない古い環境では、アイテムにマージンを設定し、コンテナーに負のマージンを設定して余白を作ります。ただし現在は、すべての最新ブラウザーがgapに対応しているため、こちらを優先してください。

ネストしたFlexコンテナー

どのFlexアイテムも、それ自体をFlexコンテナーにできます。複雑なレイアウトではFlexboxをネストします。たとえば、カードを横一列に並べ、各カードの内部もFlexで配置します。これは最新のレイアウトで一般的なパターンです。

.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  flex: 1;  /* push footer to the bottom */
}
.card-footer {
  margin-top: auto; /* or use flex: 0 on footer */
}

確認問題

flex-wrapがwrapのとき、交差軸に沿ってFlexアイテム間の空間を分配するプロパティはどれですか？

まとめ：Flexboxの詳細

主軸方向の分配にはjustify-contentを使います。1行の交差軸方向の整列にはalign-items、複数行の交差軸方向の整列にはalign-contentを使います。アイテムごとの整列にはalign-selfを使います。flex-wrap: wrapで複数行が有効になります。flex短縮記法で拡大・縮小・基準サイズを制御できます。orderで表示順を変更できます。min-width: 0で縮小に関する不具合を防げます。

よくある質問

「Flexbox徹底入門: 配置、折り返し、順序」レッスンは無料ですか？

はい。「Flexbox徹底入門: 配置、折り返し、順序」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Flexbox徹底入門: 配置、折り返し、順序」で何を学びますか？

justify-content、align-items、align-self、flex-wrap、flex-grow、flex-shrink、flex-basis、orderプロパティを使いこなします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Flexbox徹底入門: 配置、折り返し、順序」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Frontend Academyに戻る