基礎6：新しいフレックスグリッド

基礎6のフレックスグリッド：強力なフレックスボックスベースのレイアウトシステム

Foundation 6は、ゲームを変えるフレックスグリッドを導入し、レスポンシブで複雑なWebデザインを作成するためのFlexBoxの力を活用します。 ただし、この高度なシステムには、ブラウザの互換性の考慮事項が必要です。 IE8やIE9のようなレガシーブラウザとは互換性がありません

主要な機能と考慮事項：

• オプションのコンポーネント：デフォルトではフレックスグリッドは有効になっていません。 標準グリッドの代替品として設計されており、クラス名（、.row）が重複するため、両方を同時に使用することはできません。 .column
拡張制御：
• 要素の順序、水平および垂直アライメント、およびその他のレイアウトの側面を簡単に管理できます。 粒状制御のために、それぞれが一意のレイアウトを備えた複数のグリッドを作成します。 ブラウザのサポート：
FlexBoxへの依存は、最新のブラウザとの互換性のみを意味します。 レガシーブラウザのサポートには、標準のグリッドに固執する必要があります
• フレックスグリッドの実装：

SASSユーザーの場合は、

：を変更します

カスタムビルドの場合、カスタマイズプロセス中にフレックスグリッドを選択します。

app.scss

// @include foundation-grid;
@include foundation-flex-grid;

基本的な使用法：

単純な3列のレイアウト：

要素の順序：

<div class="row">
  <div class="column small-12 medium-6 large-4">Column 1</div>
  <div class="column small-12 medium-6 large-4">Column 2</div>
  <div class="column small-12 medium-6 large-4">Column 3</div>
</div>

FlexBoxは、要素の並べ替えを簡素化します。 デバイス固有の順序付けには、

またはを使用してください：

デバイス固有の順序：order-{value} {size}-order-{value}

<div class="row">
  <div class="column order-2">Second</div>
  <div class="column order-1">First</div>
</div>

<div class="row">
  <div class="column small-order-1 medium-order-2">Small: First, Medium: Second</div>
  <div class="column small-order-2 medium-order-1">Small: Second, Medium: First</div>
</div>

アラインメント：

、などのクラスを使用して、水平および垂直にコンテンツを簡単に中央に集め、または個々の要素または個々の要素のいずれかに適用されます。 たとえば、均等に間隔を置いたメニュー項目：

align-centeralign-middle修正されたSASSグリッドシステム：.row .column

ファンデーション6は、コアグリッドミックスを強化し、列数が変化する複数のグリッド定義を可能にします。 これにより、高度にカスタマイズされたレイアウトが可能になります

<div class="row align-spaced">
  <div class="column small-3">Home</div>
  <div class="column small-3">About</div>
  <div class="column small-3">Contact</div>
</div>

結論：

Foundation 6のFlex Gridは、前任者と比較して、レイアウトを優れた柔軟性と制御を提供します。 レガシーブラウザーのサポートが制約でない場合、それは合理化された開発と適応可能なデザインのための推奨アプローチです。 Enhanced Sass Grid Mixinは、開発者に高度にカスタマイズされたグリッドシステムを提供します。

以上が基礎6：新しいフレックスグリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。