2.3 KiB
| title | description | video | sass | ||
|---|---|---|---|---|---|
| Flexbox Mode | For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox. | KxafSdyTCIg |
|
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
If you're using the CSS version of Foundation, you can generate a custom download of Foundation with flexbox mode enabled. If you're 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.