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.
Name | Type | Default Value | Description |
---|---|---|---|
$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.
Parameter | Type | Default Value | Description |
---|---|---|---|
$x |
Keyword | null |
Horizontal alignment to use. Can be |
$y |
Keyword | null |
Vertical alignment to use. Can be |
flex-align-self
@include flex-align-self($y);
Vertically align a single column within a flex row. Apply this mixin to a flex column.
Parameter | Type | Default Value | Description |
---|---|---|---|
$y |
Keyword | null |
Vertical alignment to use. Can be |
flex-order
@include flex-order($order);
Changes the source order of a flex child. Children with lower numbers appear first in the layout.
Parameter | Type | Default Value | Description |
---|---|---|---|
$order |
Number | 0 |
Order number to apply. |
flex-direction
@include flex-direction($direction);
Change flex-direction
Parameter | Type | Default Value | Description |
---|---|---|---|
$direction |
Keyword | row |
Flex direction to use. Can be
|