From 54d7694a07b7d96d163139ba9cae1beacf1dcf70 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 23 Apr 2019 11:54:14 -0700 Subject: [PATCH 1/7] Adding flex utilities for grow, order, and width --- src/utilities/flexbox.scss | 6 ++++++ src/utilities/layout.scss | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index 769d9fe81d..d72a53181d 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -48,5 +48,11 @@ flex-grow: 1; flex-basis: 0; } + + .flex#{$variant}-grow-0 { flex-grow: 0 !important; } + + .flex#{$variant}-order-none { order: inherit !important; } + .flex#{$variant}-order-1 { order: 1 !important; } + .flex#{$variant}-order-2 { order: 2 !important; } } } diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss index ba8d4a5ca7..a93620eb93 100644 --- a/src/utilities/layout.scss +++ b/src/utilities/layout.scss @@ -82,6 +82,11 @@ @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 */ From bd4212e672807841d97e96a5a994c3911a8b7c4f Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 23 Apr 2019 11:59:42 -0700 Subject: [PATCH 2/7] Too much whitespace --- src/utilities/layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utilities/layout.scss b/src/utilities/layout.scss index a93620eb93..f0a68bde00 100644 --- a/src/utilities/layout.scss +++ b/src/utilities/layout.scss @@ -83,7 +83,6 @@ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { - // Auto varients .width#{$variant}-auto { width: auto !important; } From 9f4cf030a65f472516f57d532641c8b461d2f3ed Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 16 Jul 2019 19:25:12 +0900 Subject: [PATCH 3/7] Move .flex-grow-0 So it's grouped with the other flex properties --- src/utilities/flexbox.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index d72a53181d..a225d84399 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; } @@ -49,8 +50,6 @@ flex-basis: 0; } - .flex#{$variant}-grow-0 { flex-grow: 0 !important; } - .flex#{$variant}-order-none { order: inherit !important; } .flex#{$variant}-order-1 { order: 1 !important; } .flex#{$variant}-order-2 { order: 2 !important; } From 57483c05f31c808bc6ba37aa4a81ca893ea13c1d Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 16 Jul 2019 19:38:55 +0900 Subject: [PATCH 4/7] Document flex-grow-0 and flex-shrink-0 --- pages/css/utilities/flexbox.md | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/pages/css/utilities/flexbox.md b/pages/css/utilities/flexbox.md index 73452e3135..ff7e932a89 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` | Reset `flex-grow` to 0 | +| `.flex-shrink-0` | Reset `flex-shrink` to 0 | #### 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. From d2e5af74b25211ae0bceb7857a26ae7143008c2a Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 16 Jul 2019 19:58:37 +0900 Subject: [PATCH 5/7] Update flex-grow-0 and flex-shrink-0 --- pages/css/utilities/flexbox.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pages/css/utilities/flexbox.md b/pages/css/utilities/flexbox.md index 1875466868..38a91ec362 100644 --- a/pages/css/utilities/flexbox.md +++ b/pages/css/utilities/flexbox.md @@ -481,8 +481,8 @@ Use this class to specify the ability of a flex item to alter its dimensions to | Class | Description | | --- | --- | | `.flex-auto` | Sets default values for `flex-grow` (1), `flex-shrink` (1) and `flex-basis` (auto) | -| `.flex-grow-0` | Reset `flex-grow` to 0 | -| `.flex-shrink-0` | Reset `flex-shrink` to 0 | +| `.flex-grow-0` | Prevents growing of a flex item | +| `.flex-shrink-0` | Prevents shrinking of a flex item | #### flex-auto @@ -507,7 +507,7 @@ Use this class to specify the ability of a flex item to alter its dimensions to #### flex-shrink-0 ```html -
+
.flex-auto
.flex-auto .flex-shrink-0
.flex-auto
From b34927880a3fba430c4ec31bc3446cf07af6236f Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 17 Jul 2019 08:43:13 +0900 Subject: [PATCH 6/7] Document flex order --- pages/css/utilities/flexbox.md | 43 ++++++++++++++++++++++++++++++++++ src/utilities/flexbox.scss | 2 +- 2 files changed, 44 insertions(+), 1 deletion(-) diff --git a/pages/css/utilities/flexbox.md b/pages/css/utilities/flexbox.md index 38a91ec362..29116fee91 100644 --- a/pages/css/utilities/flexbox.md +++ b/pages/css/utilities/flexbox.md @@ -600,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/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index a225d84399..e9944496e8 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -50,8 +50,8 @@ flex-basis: 0; } - .flex#{$variant}-order-none { order: inherit !important; } .flex#{$variant}-order-1 { order: 1 !important; } .flex#{$variant}-order-2 { order: 2 !important; } + .flex#{$variant}-order-none { order: inherit !important; } } } From 1f8274f495befe6d8d39c4771792c0733222b922 Mon Sep 17 00:00:00 2001 From: simurai Date: Wed, 17 Jul 2019 08:59:22 +0900 Subject: [PATCH 7/7] Document .width-auto --- pages/css/utilities/layout.md | 10 ++++++++++ 1 file changed, 10 insertions(+) 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