ラップバトリング

ラップバトル（またはバトルラップ）は、2人以上のラッパーが互いに歌い合うラップパフォーマンスの一種です（通常、いくつかの侮辱/攻撃を含みます）。今日のコミックは、同音異義語の Rap と Wrap を使って、Flexbox とflex-wrapプロパティを使った愚かなジョークを表現しています。

フレックス コンテナは、デフォルトでコンテンツを 1 行にレイアウトします。これは問題ないかもしれませんが、アイテムのサイズがコンテナを超えると、アイテムが圧迫されたり、あふれたりします。したがって、代わりに、コンテンツを複数行に分割したい場合があります。ここでflex-wrap活躍します。

このプロパティは、フレックス コンテナーが単一行であるか複数行であるかを定義し (フレックス アイテムの量とサイズに応じて)、複数行の場合は、ラップ後にアイテムがどのように積み重ねられるかを定義します。

flex-wrap3 つの主な値があります。

• nowrap: 商品はラッピングされません。代わりに、サイズを調整するか、親をオーバーフローさせます。(これはデフォルト値です。)
• wrap: アイテムはフレックス コンテナーから溢れるのではなく、ラップされます。クロススタートからクロスエンドまで積み重ねられます。
• wrap-reverse: アイテムはフレックス コンテナーから溢れるのではなく、ラップされます。クロスエンドからクロススタートまで積み重ねられます。

幅が定義された 5 つの項目を含むフレックス コンテナーの例を確認してみましょう。デフォルトでは、 の値はflex-wrap"nowrap" なので、フレックス項目はコンテナーからオーバーフローします (生成される迷惑な水平方向のオーバーフローを避けるために、画像として配置しています)。

ここで、 に「wrap」の値を設定するようにコードを変更するとflex-wrap、フレックス項目がコンテナからオーバーフローする場合、代わりに新しい行にラップされます (ライブデモ)。

しかし、「wrap-reverse」に設定するとflex-wrap、ラップの方向は逆になります。ラップされた要素は新しい行に入る代わりに、他の要素を新しい行に押し込みます。

最後の例はflex-direction「column」に設定したものです。この場合、要素は縦方向に列に編成されるため、要素を折り返すときは行ではなく列で行われます。

これらの例がお役に立ち、今日のコミックを楽しんでいただければ幸いです。詳細についてflex-wrapは、次のソースを参照してください。

• フレックスラップに関する MDN 記事
• CSS のトリック: Flexbox の完全ガイド
• Josh W Comeau: Flexbox の対話型ガイド