Menu icon Foundation
Foundation 6 Flex-grid

How can i use flex-grid in "css" version ?

flex-gridfoundation6

How can i use flex-grid in "css" version ?

Hans McMurdy almost 4 years ago

You are asking about the pure css version? I do not believe it is included in the css version.
http://foundation.zurb.com/sites/download/

However, you should be using the scss version because it is way better.

If you want flexbox instead use this...
```SCSS
@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;

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

@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

// If you want to use BOTH without conflicts, I've been using this it is easier to use the mixins:

@charset 'utf-8';

@import 'settings';
@import 'foundation';

@include foundation-everything;

@mixin flex-grid-row(
  $behavior: null,
  $width: $grid-row-width,
  $columns: null,
  $base: true
) {
  $behavior: -zf-get-options($behavior, nest collapse);
  $margin: auto;

  @if map-get($behavior, nest) {
    $margin: -$grid-column-gutter;
  }
  @else {
    max-width: $width;
  }

  @if $base {
    display: flex;
    flex-flow: row wrap;
  }

  margin-left: $margin;
  margin-right: $margin;

  @if $columns != null {
    @include grid-context($columns, $root) {
      @content;
    }
  }
}
@function flex-grid-column($columns: null) {
  $flex: 1 1 0px;
  @if $columns == shrink {
    $flex: 0 0 auto;
  }
  @else if $columns != null {
    $flex: 0 0 grid-column($columns);
  }
  @return $flex;
}
@mixin flex-grid-column(
  $columns: null,
  $gutter: $grid-column-gutter
) {
  flex: flex-grid-column($columns);
  padding-left: $gutter;
  padding-right: $gutter;

  // max-width fixes IE 10/11 not respecting the flex-basis property
  @if $columns != null and $columns != shrink {
    max-width: grid-column($columns);
  }
}

@mixin foundation-flex-grid {
  // Row
  .flex-row {
    @include flex-grid-row;

    // Nesting behavior
    & &,
    .flex-column-row & {
      @include flex-grid-row(nest, $base: false);
    }
  }

  // Column
  %flex-column {
    @include flex-grid-column;
  }

  .flex-column,
  .flex-columns {
    @extend %flex-column;
  }

  // Sizing (percentage)
  @each $size in $breakpoint-classes {
    @include breakpoint($size) {
      @for $i from 1 through $grid-column-count {
        .flex-#{$size}-#{$i} {
          flex: flex-grid-column($i);
          max-width: grid-column($i);
        }
      }
    }
  }

  // Sizing (expand)
  @each $size in $breakpoint-classes {
    @if $size != small {
      @include breakpoint($size) {
        .flex-#{$size}-expand {
          flex: flex-grid-column();
        }
      }
    }
  }

  // Sizing (shrink)
  .flex-shrink {
    flex: flex-grid-column(shrink);
  }

  // Auto-stacking/unstacking
  @each $size in $breakpoint-classes {
    @if $size != small {
      .flex-row.#{$size}-unstack {
        .flex-column {
          flex: flex-grid-column(100%);

          @include breakpoint($size) {
            flex: flex-grid-column();
          }
        }
      }
    }
  }

  // Source ordering
  @each $size in $breakpoint-classes {
    @include breakpoint($size) {
      @for $i from 1 through 6 {
        .flex-#{$size}-order-#{$i} {
          order: $i;
        }
      }
    }
  }

  // Horizontal alignment using justify-content
  @each $hdir, $prop in (
    'right': flex-end,
    'center': center,
    'justify': space-between,
    'spaced': space-around,
  ) {
    .flex-row.flex-align-#{$hdir} {
      justify-content: $prop;
    }
  }

  // Horizontal alignment using align-items and align-self
  @each $vdir, $prop in (
    'top': flex-start,
    'bottom': flex-end,
    'middle': center,
    'stretch': stretch,
  ) {
    .flex-row.flex-align-#{$vdir} {
      align-items: $prop;
    }

    .flex-column.flex-align-#{$vdir} {
      align-self: $prop;
    }
  }
}
@include foundation-flex-grid;

SHERIF almost 4 years ago

it's working now :) Thank you.

Kenth Hagström almost 2 years ago

You can download a customized version from the download page. Just select the flex-grid and scroll down and press the bottom button to download a custom css version.