/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
///
-/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+/// @param {Mixed} $columns [expand] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
/// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
@mixin flex-grid-column(
- $columns: null,
- $gutter: $grid-column-gutter
+ $columns: expand,
+ $gutters: $grid-column-gutter
) {
// Base properties
- @include flex-grid-size($columns);
+ flex: flex-grid-column($columns);
// Gutters
- @if type-of($gutter) == 'map' {
- @each $breakpoint, $value in $gutter {
- $padding: rem-calc($value) / 2;
-
- @include breakpoint($breakpoint) {
- padding-left: $padding;
- padding-right: $padding;
- }
- }
- }
- @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
- $padding: rem-calc($gutter) / 2;
- padding-left: $padding;
- padding-right: $padding;
- }
+ @include grid-column-gutter($gutters: $gutters);
// fixes recent Chrome version not limiting child width
// https://stackoverflow.com/questions/34934586/white-space-nowrap-and-flexbox-did-not-work-in-chrome