開発者ドキュメント

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

序章

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

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

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

div.parent {
  display: flex;
}

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

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

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

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


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

デフォルトでは、 flex コンテナは、その子要素を1行に収めようとします。 これは、 nowrap のために flex-wrap 財産。

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

ゲイター
ケイマン
クロコダイル

親要素をaにすると flex コンテナ、子供たちはすべて一列になります。

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
ゲイター
ケイマン
クロコダイル

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

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

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

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

には3つの有効な値があります flex-wrap 財産:

の違いを確認するには wrapwrap-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-wrapflex-direction.

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

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

フレックスフローの使用

flex-flow 宣言します flex-direction 最初に親要素の flex-wrap 2番目の値。 明示的に宣言する必要がある場合にのみ使用してください flex-directionflex-wrap デフォルト値とは異なります。

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

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

またはと flex-flow 同じ効果を得るための省略形:

.backwards-flex-container {
  flex-flow: row-reverse wrap-reverse;
}
ゲイター
ケイマン
クロコダイル

この「逆方向」の例では、子要素が一列に並んでいますが、順序が逆になっています( flex-direction). また、オーバーフローした子は、最初の行のの新しい行にラップされます。 ✨

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


ブラウザのサポート

一般的に、フレックスボックスと flex-wrap 最新のすべてのブラウザで非常によくサポートされています。 Internet Explorer(IE)でさえ、flexboxと flex-wrap IE9の後。

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などの一部の古いバージョンのブラウザでは特にサポートされていないことに注意してください。

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

モバイルバージョンを終了