Foundation 6: The New Flex Grid

Foundation 6's Flex Grid: A Powerful, Flexbox-Based Layout System

Foundation 6 introduces a game-changing Flex Grid, leveraging the power of flexbox for creating responsive and complex web designs. However, this advanced system requires browser compatibility considerations; it's incompatible with legacy browsers like IE8 and IE9.

Key Features and Considerations:

• Optional Component: The Flex Grid isn't enabled by default. It's designed as a replacement for the standard grid, and both cannot be used simultaneously due to overlapping class names (.row, .column).
• Enhanced Control: Easily manage element order, horizontal and vertical alignment, and other layout aspects. Create multiple grids, each with unique layouts, for granular control.
• Browser Support: Its reliance on flexbox means compatibility with modern browsers only. Legacy browser support necessitates sticking with the standard grid.

Implementing the Flex Grid:

For Sass users, modify app.scss:

<code class="language-scss">// @include foundation-grid;
@include foundation-flex-grid;</code>

For custom builds, select the Flex Grid during the customization process.

Basic Usage:

A simple 3-column layout:

<code class="language-html"><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></code>

Element Ordering:

Flexbox simplifies element reordering. Use order-{value} or {size}-order-{value} for device-specific ordering:

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

Device-specific ordering:

<code class="language-html"><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></code>

Alignment:

Easily center content horizontally and vertically using classes like align-center, align-middle, etc., applied to either the .row or individual .column elements. For example, evenly spaced menu items:

<code class="language-html"><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></code>

Revised Sass Grid System:

Foundation 6 enhances its core grid mixin, allowing multiple grid definitions with varying column counts. This enables highly customized layouts:

<code class="language-scss">.row-listing {
  @include grid-row(18) {
    .primary { @include grid-column(10); }
    .secondary { @include grid-column(4); }
    .tertiary { @include grid-column(4); }
  }
}</code>

Conclusion:

Foundation 6's Flex Grid offers superior flexibility and control over layout compared to its predecessor. If legacy browser support isn't a constraint, it's the recommended approach for streamlined development and adaptable designs. The enhanced Sass grid mixin further empowers developers with highly customized grid systems.

The above is the detailed content of Foundation 6: The New Flex Grid. For more information, please follow other related articles on the PHP Chinese website!