diff --git a/pages/css/utilities/flexbox.md b/pages/css/utilities/flexbox.md index 02e7cb2f2d..29116fee91 100644 --- a/pages/css/utilities/flexbox.md +++ b/pages/css/utilities/flexbox.md @@ -472,13 +472,17 @@ When the main axis wraps, this creates multiple main axis lines and adds extra s Use this class to specify the ability of a flex item to alter its dimensions to fill available space. -```CSS -.flex-auto { flex: 1 1 auto; } +```css +.flex-auto { flex: 1 1 auto; } +.flex-grow-0 { flex-grow: 0; } +.flex-shrink-0 { flex-shrink: 0; } ``` | Class | Description | | --- | --- | | `.flex-auto` | Sets default values for `flex-grow` (1), `flex-shrink` (1) and `flex-basis` (auto) | +| `.flex-grow-0` | Prevents growing of a flex item | +| `.flex-shrink-0` | Prevents shrinking of a flex item | #### flex-auto @@ -490,6 +494,26 @@ Use this class to specify the ability of a flex item to alter its dimensions to ``` +#### flex-grow-0 + +```html +
+
.flex-auto
+
.flex-auto .flex-grow-0
+
.flex-auto
+
+``` + +#### flex-shrink-0 + +```html +
+
.flex-auto
+
.flex-auto .flex-shrink-0
+
.flex-auto
+
+``` + ## Align self Use these classes to adjust the alignment of an individual flex item on the cross axis. This overrides any `align-items` property applied to the flex container. @@ -576,6 +600,49 @@ Use these classes to adjust the alignment of an individual flex item on the cros ``` +## Order + +Use these classes to change the order of flex items. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. + +#### CSS + +```css +.flex-order-1 { order: 1; } +.flex-order-2 { order: 2; } +.flex-order-none { order: inherit; } + +``` + +#### Classes + +| Class | Description | +| --- | --- | +| `.flex-order-1` | Set order to be 1 | +| `.flex-order-2` | Set order to be 2 | +| `.flex-order-none` | Remove order (typically used with responsive variants) | + +#### flex-order (1+2) + +```html +
+
1. .flex-order-2
+
2.
+
3. .flex-order-1
+
+``` + +#### flex-order-none + +Resize window to see the effect. + +```html +
+
1. .flex-order-1 .flex-md-order-none
+
2.
+
3.
+
+``` + ## Responsive flex utilities All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas: diff --git a/pages/css/utilities/layout.md b/pages/css/utilities/layout.md index 2d54f71b20..a49bbd7a6a 100644 --- a/pages/css/utilities/layout.md +++ b/pages/css/utilities/layout.md @@ -190,6 +190,16 @@ Use `.width-full` to set width to 100%. ``` +Use `.width-auto` to reset width to `auto` (initial value). Typically used with **responsive variants**. Resize the window to see the effect in the example below. + +```html +
+
+ +
+
+``` + Use `.height-fit` to set max-height 100%. ```html diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index 769d9fe81d..e9944496e8 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -34,6 +34,7 @@ // Item .flex#{$variant}-auto { flex: 1 1 auto !important; } + .flex#{$variant}-grow-0 { flex-grow: 0 !important; } .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; } .flex#{$variant}-self-auto { align-self: auto !important; } @@ -48,5 +49,9 @@ flex-grow: 1; flex-basis: 0; } + + .flex#{$variant}-order-1 { order: 1 !important; } + .flex#{$variant}-order-2 { order: 2 !important; } + .flex#{$variant}-order-none { order: inherit !important; } } } diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss index 58327b3ea1..ab28e5abd3 100644 --- a/src/utilities/layout.scss +++ b/src/utilities/layout.scss @@ -76,6 +76,10 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { + + // Auto varients + .width#{$variant}-auto { width: auto !important; } + /* Set the direction to rtl */ .direction#{$variant}-rtl { direction: rtl !important; } /* Set the direction to ltr */