From 15bc216d976c79ee1aa337ec4b7698aa4ddbd34a Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 31 Oct 2019 12:41:43 +0900 Subject: [PATCH 1/5] Introduce .flex-1 utility --- docs/content/utilities/flexbox.md | 12 ++++++++++++ src/utilities/flexbox.scss | 1 + 2 files changed, 13 insertions(+) diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md index 3b6558a1..3ce85351 100644 --- a/docs/content/utilities/flexbox.md +++ b/docs/content/utilities/flexbox.md @@ -487,6 +487,7 @@ 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-1 { flex: 1; } .flex-auto { flex: 1 1 auto; } .flex-grow-0 { flex-grow: 0; } .flex-shrink-0 { flex-shrink: 0; } @@ -494,10 +495,21 @@ Use this class to specify the ability of a flex item to alter its dimensions to | Class | Description | | --- | --- | +| `.flex-1` | Sets default values for `flex-grow` (1), `flex-shrink` (1) and `flex-basis` (0%) | | `.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-1 + +```html live +
+
.flex-1
+
.flex-1
+
.flex-1
+
+``` + #### flex-auto ```html live diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index 7f93c3ad..2bb92063 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -32,6 +32,7 @@ .flex#{$variant}-content-stretch { align-content: stretch !important; } // Item + .flex#{$variant}-1 { flex: 1 !important; } .flex#{$variant}-auto { flex: 1 1 auto !important; } .flex#{$variant}-grow-0 { flex-grow: 0 !important; } .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; } From 4529a10998dd51b65cbc1b9180964a6794038e3d Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 31 Oct 2019 15:17:00 +0900 Subject: [PATCH 2/5] Remove default values --- src/utilities/flexbox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index 2bb92063..5fd35dc4 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -33,7 +33,7 @@ // Item .flex#{$variant}-1 { flex: 1 !important; } - .flex#{$variant}-auto { flex: 1 1 auto !important; } + .flex#{$variant}-auto { flex: auto !important; } .flex#{$variant}-grow-0 { flex-grow: 0 !important; } .flex#{$variant}-shrink-0 { flex-shrink: 0 !important; } From 0c8a7bea10ad9f88afe80ec9343ea4762a117440 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 31 Oct 2019 15:17:36 +0900 Subject: [PATCH 3/5] Format --- src/utilities/flexbox.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index 5fd35dc4..a6ad9c54 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -32,9 +32,9 @@ .flex#{$variant}-content-stretch { align-content: stretch !important; } // Item - .flex#{$variant}-1 { flex: 1 !important; } - .flex#{$variant}-auto { flex: auto !important; } - .flex#{$variant}-grow-0 { flex-grow: 0 !important; } + .flex#{$variant}-1 { flex: 1 !important; } + .flex#{$variant}-auto { flex: 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; } From 2f3efb66dde5878b5d990479ceaac9392bc7b0e8 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 31 Oct 2019 15:23:33 +0900 Subject: [PATCH 4/5] Update documentation --- docs/content/utilities/flexbox.md | 54 ++++++++++++++++++++----------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md index 3ce85351..f3f2c969 100644 --- a/docs/content/utilities/flexbox.md +++ b/docs/content/utilities/flexbox.md @@ -487,21 +487,33 @@ 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-1 { flex: 1; } -.flex-auto { flex: 1 1 auto; } -.flex-grow-0 { flex-grow: 0; } -.flex-shrink-0 { flex-shrink: 0; } +.flex-1 { flex: 1; } +.flex-auto { flex: auto; } +.flex-grow-0 { flex-grow: 0; } +.flex-shrink-0 { flex-shrink: 0; } ``` | Class | Description | | --- | --- | -| `.flex-1` | Sets default values for `flex-grow` (1), `flex-shrink` (1) and `flex-basis` (0%) | -| `.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-1` | Fills available space | +| `.flex-auto` | Fills available space and auto-sizes based on the content | +| `.flex-grow-0` | Prevents growing of a flex item | +| `.flex-shrink-0` | Prevents shrinking of a flex item | #### flex-1 +Adding `.flex-1` makes the item grow in size to take up all the space that is available. + +```html live +
+
flex item
+
.flex-1
+
flex item
+
+``` + +Adding `.flex-1` to all flex items results in each item having the same size. + ```html live
.flex-1
@@ -512,31 +524,37 @@ Use this class to specify the ability of a flex item to alter its dimensions to #### flex-auto +Using `.flex-auto` fills the available space but also takes the size of the content into account. Type in the editor below to see the effect. + ```html live
-
.flex-auto
-
.flex-auto
-
.flex-auto
+
.flex-1
+
.flex-auto with a bit more text
+
.flex-1
``` #### flex-grow-0 +Add `.flex-grow-0` to prevent an item from growing. This can be useful when used as a responsive variant. For example to stop growing when the viewport gets wider. + ```html live
-
.flex-auto
-
.flex-auto .flex-grow-0
-
.flex-auto
+
flex item
+
.flex-auto .flex-md-grow-0
+
flex item
``` #### flex-shrink-0 +Add `.flex-shrink-0` to prevent an item from shrinking. Note that for example text will not wrap and the flex items start to overflow if there is not enough space. + ```html live -
-
.flex-auto
-
.flex-auto .flex-shrink-0
-
.flex-auto
+
+
flex item
+
.flex-shrink-0
+
flex item
``` From 3a12942befe2d746b6c26885ad0543d1bc432ebf Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 31 Oct 2019 16:09:14 +0900 Subject: [PATCH 5/5] Remove .flex-item-equal --- docs/content/utilities/flexbox.md | 13 ------------- src/utilities/flexbox.scss | 6 ------ 2 files changed, 19 deletions(-) diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md index f3f2c969..78641c78 100644 --- a/docs/content/utilities/flexbox.md +++ b/docs/content/utilities/flexbox.md @@ -693,7 +693,6 @@ All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpo - `d-[breakpoint]-[property]` for `display` - `flex-[breakpoint]-[property]-[behavior]` for various flex properties -- `flex-[breakpoint]-item-equal` for equal width and equal height flex items Each responsive style is applied to the specified breakpoint and up. @@ -712,8 +711,6 @@ Each responsive style is applied to the specified breakpoint and up. .flex-lg-nowrap {} .flex-lg-self-start {} - -.flex-md-item-equal {} ``` #### Example usage @@ -728,16 +725,6 @@ Mixing flex properties:
``` -Using the equal width, equal height utilities: - -```html live -
-
Stuff and things
-
More stuff
on multiple lines
-
Hi mom
-
-``` - ## Example components The flex utilities can be used to create a number of components. Here are some examples. diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss index a6ad9c54..a0cd73a5 100644 --- a/src/utilities/flexbox.scss +++ b/src/utilities/flexbox.scss @@ -44,12 +44,6 @@ .flex#{$variant}-self-baseline { align-self: baseline !important; } .flex#{$variant}-self-stretch { align-self: stretch !important; } - // Shorthand for equal width and height cols - .flex#{$variant}-item-equal { - 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; }