Merge pull request #763 from primer/flex_utilities

Adding flex utilities for grow, order, and width

Author: shawnbot

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
 </div>
 ```
 
+#### flex-grow-0
+
+```html
+<div class="border d-flex">
+  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
+  <div class="p-5 border bg-gray-light flex-auto flex-grow-0">.flex-auto .flex-grow-0</div>
+  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
+</div>
+```
+
+#### flex-shrink-0
+
+```html
+<div class="border d-flex" style="width: 450px">
+  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
+  <div class="p-5 border bg-gray-light flex-auto flex-shrink-0">.flex-auto .flex-shrink-0</div>
+  <div class="p-5 border bg-gray-light flex-auto">.flex-auto</div>
+</div>
+```
+
 ## 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
 </div>
 ```
 
+## 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
+<div class="border d-flex">
+  <div class="p-5 border bg-gray-light flex-order-2">1. .flex-order-2</div>
+  <div class="p-5 border bg-gray-light">2.</div>
+  <div class="p-5 border bg-gray-light flex-order-1">3. .flex-order-1</div>
+</div>
+```
+
+#### flex-order-none
+
+Resize window to see the effect.
+
+```html
+<div class="border d-flex">
+  <div class="p-5 border bg-gray-light flex-order-1 flex-md-order-none">1. .flex-order-1 .flex-md-order-none</div>
+  <div class="p-5 border bg-gray-light">2.</div>
+  <div class="p-5 border bg-gray-light">3.</div>
+</div>
+```
+
 ## Responsive flex utilities
 
 All flexbox utilities can be adjusted per [breakpoint](/css/objects/grid#breakpoints) using the following formulas:

pages/css/utilities/layout.md

@@ -190,6 +190,16 @@ Use `.width-full` to set width to 100%.
 </div>
 ```
 
+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
+<div class="d-table width-full width-md-auto">
+  <div class="d-table-cell">
+    <input class="form-control width-full" type="text" value="Responsive width form field" aria-label="Sample full responsive width form field">
+  </div>
+</div>
+```
+
 Use `.height-fit` to set max-height 100%.
 
 ```html

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; }
   }
 }

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 */