Button-group and flex classes not aligning correctly due to clearfix

## What should happen?
If using flex classes like `.align-justify` on a `.button-group` the buttons should spread evenly within its containers width.

## What happens instead?
The clearfix in `:before`/`:after` takes space and the buttons are not aligned properly.
See error in the documentation example: [Flex Button Group](https://get.foundation/sites/docs/button-group.html#flexbox-button-group)

## Possible Solution
The issue is probably a result of moving the clearfix to after the `@if` that disables the clearfix. Solution would be to add `!important` to scss/components/_button-group.scss:46 or strengthen the selector in some way.

```
@if $global-flexbox {
display: flex;
flex-wrap: wrap;
align-items: stretch;
flex-grow: 1;
&::before,
&::after {
display: none !important; // Disable clearfix
}
}
```

## Test Case and/or Steps to Reproduce (for bugs)
Test Case: https://get.foundation/sites/docs/button-group.html#flexbox-button-group (spaced and justify)

## Your Environment
- Foundation version(s) used: 6.9.0

## Checklist
- [x] I have read and follow the CONTRIBUTING.md document.
- [x] There are no other issues similar to this one.
- [x] The issue title and template are correctly filled.

Start in scss/components/_button-group.scss around line 46, then reproduce the spaced and justify examples in the Flex Button Group documentation. Verify that the clearfix pseudo-elements no longer take space when flex classes are used and that the buttons spread evenly within the container.

Written by the indexing model from the issue text.