Flexbox Mode

For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.

Flexbox Mode

Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days though, there's a better way... if you are happy with the below browser support!

Enabling flexbox mode replaces those hacks with flexbox properties, streamlining how layouts are made, and making sizing and alignment of elements much easier.

Flexbox mode is only supported in these browsers:

  • The latest Chrome and Firefox
  • Safari 6+
  • IE/Edge 10+
  • iOS 7+
  • Android 4.4+

Enabling Flexbox Mode

Using the Sass version of Foundation, you can enable flexbox mode two ways:

If you use the foundation-everything() mixin in your main Sass file, pass in the parameter true to enable flexbox mode.

@include foundation-everything(true);

If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set $global-flexbox to true, and remove the @include for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):

$global-flexbox: true;

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

Supported Components

Besides the flex grid, these components have flexbox modes:

In general, all of the components work exactly the same. However, a few of them require slight changes to CSS classes used to work properly. Refer to the documentation for each to find out what's different.


Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$flex-source-ordering-count Number 6

Default value for the count of source ordering`

$flexbox-responsive-breakpoints Boolean true

Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

flex

@include flex;

Enables flexbox by adding display: flex to the element.


flex-align

@include flex-align($x, $y);

Horizontally or vertically aligns the items within a flex container.

ParameterTypeDefault ValueDescription
$x Keyword null

Horizontal alignment to use. Can be left, right, center, justify, or spaced. Or, set it to null (the default) to not set horizontal alignment.

$y Keyword null

Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.


flex-align-self

@include flex-align-self($y);

Vertically align a single column within a flex row. Apply this mixin to a flex column.

ParameterTypeDefault ValueDescription
$y Keyword null

Vertical alignment to use. Can be top, bottom, middle, or stretch. Or, set it to null (the default) to not set vertical alignment.


flex-order

@include flex-order($order);

Changes the source order of a flex child. Children with lower numbers appear first in the layout.

ParameterTypeDefault ValueDescription
$order Number 0

Order number to apply.


flex-direction

@include flex-direction($direction);

Change flex-direction

ParameterTypeDefault ValueDescription
$direction Keyword row

Flex direction to use. Can be

  • row (default): same as text direction
  • row-reverse: opposite to text direction
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse top to bottom