biofriction-wp-theme/node_modules/foundation-sites/docs/pages/flexbox-mode.md

61 lines
2.3 KiB
Markdown
Raw Normal View History

2021-10-26 14:18:09 +02:00
---
title: Flexbox Mode
description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.
video: 'KxafSdyTCIg'
sass:
- scss/components/_flex.scss
- scss/util/_flex.scss
---
## 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 <a href="https://foundation.zurb.com/sites/download">custom download of Foundation</a> 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.
```scss
@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):
```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:
- [Button group](button-group.html)
- [Input group - (Forms)](forms.html#inline-labels-and-buttons)
- [Menu](menu.html)
- [Top bar](top-bar.html)
- [Media object](media-object.html)
- [Title bar](off-canvas.html#title-bar)
- [Card](card.html)
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.