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
財産:
- 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
2番目の値。 明示的に宣言する必要がある場合にのみ使用してください 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;
}
この「逆方向」の例では、子要素が一列に並んでいますが、順序が逆になっています( 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などの一部の古いバージョンのブラウザでは特にサポートされていないことに注意してください。
プレフィックスが必要かどうかを確認するには、特に古いバージョンのブラウザをサポートしている場合は、使用できますかでブラウザのサポートに関する最新情報を確認してください。