ブートストラップグリッド：最も便利なフレックスボックスプロパティのマスタリング

この記事では、レスポンシブレイアウトを作成するために、FlexBox上に構築されたBootstrapのグリッドシステムを調査します。 効率的で適応性のあるデザインを構築するために、主要なクラスとフレックスボックスの概念をカバーします。

重要な概念：

Bootstrap 4レバレッジFlexBoxのグリッドには、さまざまな画面サイズのレイアウト作成を簡素化します。

コアクラス：
• 、
、および
• は、レスポンシブグリッドの基礎を形成します。 ブートストラップと統合されたFlexBoxは、等しい列または等幅の列を簡単に作成し、CSSハッキングの必要性を排除します。 .containerBootstrapのFlexユーティリティクラス（例えば、.row、.col-*-*、
）は、フレックスコンテナとアイテムの動作を粒状制御します。
• Flexboxの理解：.d-flex .flex-row .flex-columnFlexBox（Flexible Box）は、動的な画面サイズに最適な最新のCSSレイアウトシステムです。 フレックスコンテナは、さまざまなビューポートに合うように子供のサイズを調整します。 Bootstrapは、LapperクラスでFlexBoxの使用を簡素化します

ブートストラップグリッドシステム：

グリッドシステムは、複雑なレイアウトにとって重要です。 Bootstrapのグリッドには、超大型画面用のブレークポイントとフロートの代わりにFlexBoxを使用しています。

キーグリッドクラス：

：アウターラッパー;固定幅には

を使用し、全幅には

を使用します xl

：列用の論理コンテナ

：列の幅を定義します（例えば、中画面、6列の幅の場合は

）。 必要な最小のブレークポイントを使用します。

は、
• 、.container、.container、および.container-fluidブレークポイントに適用されます。
• FlexboxとFloatsを備えた.row
ブートストラップグリッド：
• .col-*-* .col-md-6FlexBoxは、以前はCSSハッキング（FloatやClearFixなど）を必要とする等しい高さの列の作成などのタスクを簡素化します。 Bootstrap 4のFlexboxベースのグリッドは、より現実的なテーブルのような列になります。 幅を指定せずに.col-sm-6クラスを使用するだけで、等幅の列が達成されます。使用可能なスペースは自動的に分割されます smmd例：等幅列lg xl

これにより、小さなブレークポイントから上向きに4つの25％幅の列が作成されます。

Flexboxおよびauto margins：.col-*

FlexBoxと自動マージンを組み合わせることで、高度なポジショニングが可能になります。 .mr-auto（マージン右：自動）要素を右に押し、.ml-auto（マージン左：auto）は左に押します。 同様の垂直アライメントは、.mb-autoおよび.mt-autoを使用してflex-direction: columnおよび適切なalign-itemsクラスを使用して達成されます。

ブートストラップフレックスユーティリティのための必須フレックスボックスコンセプト：

フレックスコンテナ：

（または
• in bootstrap）を使用して作成されました。 display: flexフレックスアイテム：.d-flexフレックスコンテナの直接の子供。
• ：
アイテムの方向（
• 、、flex-direction、）を制御します。 Bootstrapは、rowやrow-reverse。columnなどのクラスを使用します column-reverse .flex-row .flex-column：
アイテムの注文を制御します（bootstrapは
• classesを使用します） order：order-*メイン軸のアイテムを調整します（bootstrapは
クラスを使用します）。
• justify-content：は、交差軸にアイテムを調整します（bootstrapはjustify-content-*クラスを使用します）。
• 結論：align-items align-items-*BootstrapのFlexboxベースのグリッドは、レスポンシブレイアウト設計に対する強力で柔軟なアプローチを提供します。 FlexBoxの概念をマスターすると、Bootstrapのユーティリティクラスを効果的に利用する能力が向上します。 Bootstrapのドキュメントと実践のさらなる調査は、あなたの理解を固めます。

以上がブートストラップグリッド：最も便利なフレックスボックスプロパティのマスタリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。