FlexBoxレイアウト內(nèi)のアイテムを自動的にラップするには、FlexRap：wrapを設(shè)定する必要があります。 1. Flex-Wrap屬性を使用して、ラインをラップするかどうかを制御します。一般的な値には、Nowrap（ラッピングではなく）、ラップ（ダウンラッピング）、ラップリバース（ラップアップ）が含まれます。 2。フレックス方向?qū)傩预蚪Mみ合わせると、スピンドルの方向を変えると、行（デフォルト）、行（右から左）、列（上から下）などの配置順序とライン破壊位置に影響します。 3.ギャップ屬性を使用して、レイアウトのきちんとした性を改善するために、ラッピング後にプロジェクト間隔を均一に設(shè)定することをお勧めしますが、ブラウザの互換性に注意する必要があります。レスポンシブレイアウトを簡単に実現(xiàn)するために、これらのテクニックを習(xí)得します。

レイアウトにFlexBoxを使用する場合、アイテムが多すぎて、置くことができない1つのラインがある場合があるため、自動的にラップする必要があります。 FlexBox自體は自動ラインラッピングをサポートしており、それを行うためにプロパティを設(shè)定するだけです。

Flex-Rapは、ラインを包むかどうかを制御します

デフォルトでは、フレックスボックスコンテナのアイテムはラインに絞ることを余儀なくされ、コンテナの幅を超えても、包まれません。それらを自動的にラップするには、 flex-wrap: wrap;コンテナに。

このプロパティには、いくつかのオプションの値があります。

• nowrap （デフォルト）：ラインラッピングなし
• wrap ：自動ラッピング、新しいラインは以下にあります
• wrap-reverse ：自動ラッピングですが、新しいラインが上にあります

たとえば、レスポンシブカードレイアウトを作成する場合は、次のように書くことができます。

 。容器 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
}

このようにして、十分なスペースがない場合、プロジェクトは自動的に落ち、コンテナを壊しません。

スピンドルの方向を制御すると、ライン破壊の順序に影響します

ラインを包むかどうかに加えて、 flex-directionを介してスピンドルの方向を制御することもできます。これは、アイテムの順序とラインブレークの位置に影響を與えます。

一般的な値は次のとおりです。

• row （デフォルト）：左から右に配置し、線が壊れます
• row-reverse ：右から左にアレンジ、ラインが分解します
• column ：上から下へ、ラインブレークを右に並べる
• column-reverse ：下から上へ、ラインブレークを右に並べる

たとえば、プロジェクトを右から左に並べ、新しいラインの後に右に合わせ続ける場合は、次のように組み合わせて使用??できます。

 。容器 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  Flex-Direction：Row-Reverse;
}

これは、RTL（右から左へ）のWebページレイアウトを?qū)g行する場合に役立ちます。

ラインが破損した後、間隔の問題を無視しないでください

ライン破壊機能は単純ですが、多くの人はプロジェクト間の間隔の問題を無視しています。特に、 flex-wrap: wrap;使用する場合、最後の行または最初の行がアライメントから外れたり、ギャップが大きすぎたりすることがわかります。

現(xiàn)時點では、 gap屬性を使用してプロジェクト間の間隔を均一に設(shè)定することを検討できます。

 。容器 {
  ディスプレイ：Flex;
  フレックスラップ：ラップ;
  ギャップ：16px;
}

これには、水平方向にギャップがあるだけでなく、垂直方向にもギャップがあります。 marginだけを使用するよりもはるかに便利できれいです。

ただし、 gap古いブラウザでプレフィックスする必要があるか、サポートされていない場合があることに注意する必要があります。より良い互換性が必要な場合は、マージンを持つmarginを使用して同様の効果を達成できます。

基本的にそれだけです。 FlexBoxのラインラップ機能は非常に実用的です。重要なのは、 flex-wrapとflex-directionの組み合わせを理解することであり、適切な間隔処理を使用すると、さまざまなレスポンシブレイアウトを簡単に作成できます。

以上がCSS Flexboxアイテムラッピングの実裝の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。