<commit_before>---
title: Flexbox
description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.
sass:
  - scss/components/_flex.scss
  - scss/util/_flex.scss
---

Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days, there's a better way... if you have the 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 these browsers:

- The latest Chrome and Firefox
- Safari 6+
- IE 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. You can achieve this one of two methods if you're using sass:

* If you use `@include foundation-everything;` in your settings scss file (usually `app.scss` or `settings.scss`), pass `true` like so:

```scss
@include foundation-everything(true);
```

* If you included each component manually, open your settings file 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:

```scss
// @include foundation-grid;
$global-flexbox: true;
@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.html#inline-labels-and-buttons)<commit_msg>Update wording of flexbox mode docs page<commit_after>---
title: Flexbox
description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.
sass:
  - scss/components/_flex.scss
  - scss/util/_flex.scss
---

Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days, there's a better way... if you have the 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 these browsers:

- The latest Chrome and Firefox
- Safari 6+
- IE 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, open your settings file 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:

```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.html#inline-labels-and-buttons)
{'fraction_non_alphanumeric': 0.09243937232524964, 'fraction_numerical': 0.0034236804564907277, 'mean_word_length': 4.461059190031152, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6472194', 'n_tokens_mistral': 1013, 'n_tokens_neox': 947, 'n_words': 444}