CSSのフレックスラップで応答性を向上させる

序章

flex-wrapプロパティは、さまざまな画面サイズで親要素の応答性を高めるための簡単な方法です。一般的なフレックスボックスと同様に、ページレイアウトが簡素化されるため、ブレークポイントを手動で設定したり、ページオーバーフローを自分で管理したりする必要はありません。

Flexboxと要素ラッピングの管理

flex-wrapは、CSSのフレックスボックス（または「フレキシブルボックス」）モジュールに固有のプロパティです。 Flexboxは、子要素が親要素でどのように表示されるかを管理するCSSレイアウトモデルです。これは、フレックスボックスが一般的なページレイアウト（ヘッダー、ナビゲーション、フッターなど）に役立つ可能性があることを意味します。ただし、さらに重要なのは、子要素を持つページ上の任意の要素に適用できることです。

div.parent {
  display: flex;
}

要素をflexコンテナーにするのは、CSS宣言にdisplay: flex;を追加するのと同じくらい簡単です。

flexコンテナがあると、同じ親要素でflex-wrapを宣言して、デフォルトで1行に収まらない子要素を処理する方法を決定できます。

div.parent {
  display: flex;
  flex-wrap: wrap;
}

フレックスラップを適用する前に、親要素をフレックスコンテナにする必要があります。 flex-wrapプロパティは、フレックスコンテナにのみ適用されます（子要素には適用されません）。

フレックスラップのデフォルト設定

デフォルトでは、flexコンテナはその子要素を1行に収めようとします。これは、flex-wrapプロパティのnowrapとも呼ばれます。

この例では、最初に、子（ブロック要素）がそれぞれ新しい行にある非フレックスコンテナから始めましょう。

ゲイター

ケイマン

クロコダイル

卵

親要素をflexコンテナにすると、子はすべて1行になります。

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

ゲイター

ケイマン

クロコダイル

卵

フレックスコンテナのデフォルトのフレックスラップ設定は「ラップなし」です。つまり、上記のように明示的に宣言する必要はありません。

これで、子要素が1行に表示されますが、ウィンドウに十分なスペースがない場合でも、子要素は1行に残ります。ウィンドウサイズが変更されると、子要素は最終的に親要素をオーバーフローするまで一緒に押しつぶされ続けます。

では、これをどのように修正しますか？ flex-wrapで！

フレックスラップオプションを理解する

flex-wrapプロパティには次の3つの有効な値があります。

nowrap ：これはflexコンテナーのデフォルト値であるため、他のスタイルをオーバーライドしない限り、明示的に宣言する必要はありません。子要素は常に1行にとどまります。
wrap ：wrapを使用すると、子要素が最初の行に収まらなくなったときに、追加の行に折り返すことができます。収まらない要素は、親要素の左下に折り返されます。
wrap-reverse ：これにより、wrapとは逆の効果が発生します。オーバーフローした要素を左下に折り返す代わりに、親の左上にある最初の子要素の上の新しい行に折り返します。

wrapとwrap-reverseの違いを確認するには、ウィンドウのサイズを変更して、次の2つの例を比較してください。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

ゲイター

ケイマン

クロコダイル

卵

この最初の例では、最初の子要素の下の新しい行にオーバーフローする要素があります。

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

ゲイター

ケイマン

クロコダイル

卵

この2番目の例は逆のことを行い、オーバーフローした要素を最初の子要素の上にラップします。 wrap-reverseの使用はあまり一般的ではありませんが、CSSツールキットに含めることをお勧めします。 🥳

Flexboxの速記：フレックスフロー

できるだけ少ない行でコードを記述したい場合は、flex-wrapがフレックスボックスの省略形flex-flowの一部であることを知っていただければ幸いです。

flex-flowは、flex-wrapおよびflex-directionを置き換えるフレックスボックスプロパティです。

フレックス方向のクイックイントロ

flex-directionは、子要素を行または列のどちらにするかを決定します。 4つのオプションは、row、column、column-reverse、およびrow-reverseです。 flex-directionのデフォルト値はrowです。

フレックスフローの使用

flex-flowは、最初に親要素のflex-directionを宣言し、次にflex-wrap値を宣言します。 flex-directionおよびflex-wrapをデフォルト値とは異なるものとして明示的に宣言する必要がある場合にのみ使用してください。

これは、次のようにこれらのフレックスプロパティを記述できることを意味します。

.backwards-flex-container {
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
}

または、flex-flowの省略形を使用して、同じ効果を得ることができます。

.backwards-flex-container {
  flex-flow: row-reverse wrap-reverse;
}

ゲイター

ケイマン

クロコダイル

卵

この「逆方向」の例では、子要素が1行になりますが、順序が逆になります（flex-direction）。また、オーバーフローした子は、最初の行の上の新しい行にラップされます。 ✨

フレックスフローは、特にフレックスラップを含む唯一のフレックスボックスの省略形ですが、他にもたくさんあります。省略形を好む場合は、ほとんどのフレックスボックスプロパティに省略形のオプションがあります。 💅

ブラウザのサポート

一般に、flexboxとflex-wrapは、最新のすべてのブラウザーで非常によくサポートされています。 Internet Explorer（IE）でさえ、IE9以降のflexboxとflex-wrapを部分的にサポートしています。

Flexboxプレフィックス

最近では、フレックスボックスとflex-wrapにプレフィックスを使用することはあまり一般的ではなく、それらを使用するかどうかは、サポートしようとしているブラウザのバージョンによって異なります。

.parent {
  display: flex;
  display: -webkit-flex; /* old versions of Chrome/Safari/Opera */
  display: -ms-flexbox; /* IE10 */

  flex-wrap: wrap;
  -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */
}

flex-wrapはflexboxの1つのプロパティであり、Firefoxなどの一部の古いバージョンのブラウザでは特にサポートされていないことに注意してください。

プレフィックスが必要かどうかを確認するには、特に古いバージョンのブラウザをサポートしている場合は、使用できますかでブラウザのサポートに関する最新情報を確認してください。