CSSグリッドまたはフレックスレイアウトを使用して、適応列の高さと行数を備えたDivコンテナを実装する方法は？-CSSチュートリアル-php.cn

CSSグリッドまたはフレックスレイアウトを使用して、適応列の高さと行数を備えたDivコンテナを実装する方法は？

Karen Carpenter

リリース： 2025-03-04 14:06:21

オリジナル

261 人が閲覧しました

CSSグリッドまたはフレックスボックスを使用して、適応列の高さと行数を備えたDivコンテナを作成する方法？

適応列の高さと行数を備えたDivコンテナを作成します。両方を調べてみましょう：

CSSグリッドの使用：

CSSグリッドは、2次元レイアウトの管理に優れています。適応列の高さと行数を備えたDIVを作成するには、コンテナをグリッドとして定義し、コンテンツに行数とそれぞれの高さを指示させます。グリッドは、各行内のコンテンツに基づいて行のサイジングを自動的に処理します。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust minmax values as needed */
  grid-gap: 10px; /* Adjust gap as needed */
}

.item {
  background-color: #f0f0f0;
  padding: 10px;
}

ログイン後にコピー

この例では、

が重要です。 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));では、グリッドが利用可能な画面幅に基づいて列数を自動的に調整できます。 repeat(auto-fit, ...)各列の最小幅は200pxの最小値を保証し、拡張して使用可能なスペースを比例的に埋める（minmax(200px, 1fr)）。行は自動的に高さを調整して、内部のコンテンツに対応します。行の数を明示的に定義する必要はありません。1fr

FlexBoxは、主に1次元レイアウト（行または列）用に設計されています。 FlexBoxを使用してマルチローレイアウトを作成できますが、さまざまな列高さを管理するには、より多くの手動介入が必要です。通常、アイテムが複数の行にラップできるようにするためにを使用します。ただし、個々の行の高さを直接制御することは、グリッドの場合よりも直感的ではありません。

ここでは、flex-wrap: wrap;

は各アイテムに最小幅の幅を与え、拡張して利用可能なスペースを比例して埋めることができます。ただし、列の高さに対する直接的な制御は少ないです。それらは単に各行で最も背の高いアイテムによって決定されます。

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

.item {
  flex: 1 0 200px; /* Adjust 200px as needed for minimum width */
  background-color: #f0f0f0;
  padding: 10px;
  box-sizing: border-box; /* Include padding in element width */
}

ログイン後にコピー

CSSグリッドまたはフレックスボックスは、コンテンツに基づいてDIV内の高さと列の数を動的に調整できますか？グリッドのflex: 1 0 200px;

と暗黙の行の作成により、コンテンツに対応するために必要な行の数が自動的に処理されます。各行の高さは、その内容に合わせて自動的に調整されます。この動的な動作にはJavaScriptは必要ありません

FlexBox：FlexBox's 必要に応じて、アイテムが複数の行にラップすることができます。行数は、コンテンツとコンテナの幅に基づいて動的に調整されます。ただし、個々の列の高さに対する正確な制御は、グリッドよりも直接的ではありません。各行で最も高いアイテムによって決定される自然高さを超えて、より洗練された行の高さ調整が必要な場合は、JavaScriptを使用する必要があるかもしれません。両方のベストプラクティスは次のとおりです。flex-wrap: wrap;

cssグリッドベストプラクティス：

使用

：

grid-template-columns: repeat(auto-fit, minmax(min-width, 1fr));を制御するには、min-width
：：grid-auto-rowsこのプロパティを考慮して、最小行の高さを設定できます。コンテンツが短い場合でも、行を少なくとも特定の高さにしたい場合は、これを使用してください。
grid-gapを使用して、グリッドアイテム間の一貫した間隔を提供します。維持可能性。各アイテムの幅、過度に狭い列を防止します。
javaScript：の使用を検討してください。

動的に生成された列とさまざまなコンテンツの高さを備えたdivにCSSグリッドまたはフレックスボックスを使用する場合、オーバーフローの問題を回避するにはどうすればよいですか？それらを防ぐ方法は次のとおりです

使用overflow: auto;またはoverflow: scroll;：を使用します。これにより、コンテンツが境界を超えた場合、コンテナにスクロールバーが追加されます。 auto必要な場合にのみスクロールバーを追加しますが、scrollは常に表示されます。親コンテナでこれを使用してください。

適切なサイジングを確認してください。垂直オーバーフローを避けたい場合は、グリッドまたはフレックスコンテナが定義された高さ（または少なくともamin-height）であることを確認してください。高さが明示的に設定されておらず、コンテンツが利用可能なスペースよりも高くなっている場合、それはオーバーフローします。

コンテンツの高さを制限します（該当する場合）：各行またはコンテナ全体に最大高さが合理的であることがわかっている場合、max-heightを使用して、過度の垂直成長を防ぐために
重要な。レイアウトがさまざまな画面サイズに優雅に適応し、小さな画面でコンテンツがあふれないようにします。これは、前のセクションで概説されている手法を使用して最適に達成されます。
javaScriptソリューション（必要に応じて）：
コンテンツの高さが非常にダイナミックである複雑なシナリオでは、JavaScriptがレイアウトまたはコンテナの高さを動的に調整してオーバーフローを防ぐために必要になる場合があります。これには、多くの場合、コンテンツの高さを測定し、それに応じてCSSプロパティの調整が含まれます。ただし、一般に、可能な限りCSSグリッドまたはフレックスボックスを使用してこれを処理することが推奨されます。