Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389)

* remove the $enable-flex variable option

* remove bootstrap-flex.css dist file and it's grunt task

* remove the separate flex css file for docs; it's all the same now

* remove flexbox docs (porting some to the main grid docs in next commit)

* clean up few grid docs bits to simplify copy, start to mention flexbox

* port relevant flexbox-grid.md content to grid.md

- clean up mixins
- update how it works section
- bring over sizing and alignment sections

* remove the $enable-flex from the options.md page

* update lead paragraph to mention flexbox

* update migration to mention loss of ie9 support

* remove mention of flexbox dist file

* clarify IE support

* making a note

* remove flexbox variant mentions from component docs

- updates docs for media object, navs, list group, and cards to consolidate docs
- no more need to callout flexbox variants since it's now the default

* remove $enable-flex if/else from sass files

* remove flex dist files

* update scss lint property order to account for flex properties

* linting

* change to numberless classes for autosizing, wrap in highlighting div

* bump gruntfile and postcss to ie10

* redo intro sections

* rearrange

* phew, redo hella grid docs

- rearrange all the things
- consolidate some bits

* remove reference to flexbox mode

* more border action for demo

* Make some changes to the .card's in .card-deck's to ensure footers align to the bottom

13 files changed, 122 insertions, 296 deletions

diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml
index 2f5dc20e1..2a6914a07 100644
--- a/scss/.scss-lint.yml
+++ b/scss/.scss-lint.yml
@@ -160,6 +160,8 @@ linters:
       - flex-grow
       - flex-order
       - flex-pack
+      - align-items
+      - justify-content
       - float
       - width
       - min-width
diff --git a/scss/_card.scss b/scss/_card.scss
index c3b931518..3cbd1998a 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -12,9 +12,6 @@
 }
 
 .card-block {
-  @if (not $enable-flex) {
-    @include clearfix;
-  }
   padding: $card-spacer-x;
 }
 
@@ -69,9 +66,6 @@
 //
 
 .card-header {
-  @if (not $enable-flex) {
-    @include clearfix;
-  }
   padding: $card-spacer-y $card-spacer-x;
   margin-bottom: 0; // Removes the default margin-bottom of <hN>
   background-color: $card-cap-bg;
@@ -83,9 +77,6 @@
 }
 
 .card-footer {
-  @if (not $enable-flex) {
-    @include clearfix;
-  }
   padding: $card-spacer-y $card-spacer-x;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
@@ -205,68 +196,41 @@
 //
 // Those changes are noted by `// Margin balancing`.
 
-@if $enable-flex {
-  @include media-breakpoint-up(sm) {
-    .card-deck {
+@include media-breakpoint-up(sm) {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -$card-deck-margin;
+    margin-bottom: $card-spacer-y; // Margin balancing
+    margin-left: -$card-deck-margin;
+
+    .card {
       display: flex;
-      flex-flow: row wrap;
-      margin-right: -$card-deck-margin;
-      margin-bottom: $card-spacer-y; // Margin balancing
-      margin-left: -$card-deck-margin;
-
-      .card {
-        flex: 1 0 0;
-        margin-right: $card-deck-margin;
-        margin-bottom: 0; // Margin balancing
-        margin-left: $card-deck-margin;
-      }
+      flex: 1 0 0;
+      flex-direction: column;
+      margin-right: $card-deck-margin;
+      margin-bottom: 0; // Margin balancing
+      margin-left: $card-deck-margin;
     }
-  }
-} @else {
-  @include media-breakpoint-up(sm) {
-    $space-between-cards: (2 * $card-deck-margin);
-    .card-deck {
-      display: table;
-      width: 100%;
-      margin-bottom: $card-spacer-y; // Margin balancing
-      table-layout: fixed;
-      border-spacing: $space-between-cards 0;
-
-      .card {
-        display: table-cell;
-        margin-bottom: 0; // Margin balancing
-        vertical-align: top;
-      }
-    }
-    .card-deck-wrapper {
-      margin-right: (-$space-between-cards);
-      margin-left: (-$space-between-cards);
+
+    .card-block {
+      flex-grow: 1;
     }
   }
 }
 
+
 //
 // Card groups
 //
 
 @include media-breakpoint-up(sm) {
   .card-group {
-    @if $enable-flex {
-      display: flex;
-      flex-flow: row wrap;
-    } @else {
-      display: table;
-      width: 100%;
-      table-layout: fixed;
-    }
+    display: flex;
+    flex-flow: row wrap;
 
     .card {
-      @if $enable-flex {
-        flex: 1 0 0;
-      } @else {
-        display: table-cell;
-        vertical-align: top;
-      }
+      flex: 1 0 0;
 
       + .card {
         margin-left: 0;
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 672d9dfc1..5bd86489a 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -300,39 +300,30 @@ select.form-control-lg {
 // default HTML form controls and our custom form controls (e.g., input groups).
 
 .form-inline {
-  @if $enable-flex {
-    display: flex;
-    flex-flow: row wrap;
-
-    // Because we use flex, the initial sizing of checkboxes is collapsed and
-    // doesn't occupy the full-width (which is what we want for xs grid tier),
-    // so we force that here.
-    .form-check {
-      width: 100%;
-    }
+  display: flex;
+  flex-flow: row wrap;
+
+  // Because we use flex, the initial sizing of checkboxes is collapsed and
+  // doesn't occupy the full-width (which is what we want for xs grid tier),
+  // so we force that here.
+  .form-check {
+    width: 100%;
   }
 
   // Kick in the inline
   @include media-breakpoint-up(sm) {
     label {
-      @if $enable-flex {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+      display: flex;
+      align-items: center;
+      justify-content: center;
       margin-bottom: 0;
     }
 
     // Inline-block all the things for "inline"
     .form-group {
-      @if $enable-flex {
-        display: flex;
-        flex: 0 0 auto;
-        flex-flow: row wrap;
-      } @else {
-        display: inline-block;
-        vertical-align: middle;
-      }
+      display: flex;
+      flex: 0 0 auto;
+      flex-flow: row wrap;
       margin-bottom: 0;
     }
 
@@ -351,24 +342,6 @@ select.form-control-lg {
 
     .input-group {
       width: auto;
-
-      @if not $enable-flex {
-        display: inline-table;
-        vertical-align: middle;
-
-        .input-group-addon,
-        .input-group-btn,
-        .form-control {
-          width: auto;
-        }
-      }
-    }
-
-    // Input groups need that 100% width though
-    .input-group > .form-control {
-      @if not $enable-flex {
-        width: 100%;
-      }
     }
 
     .form-control-label {
@@ -379,14 +352,9 @@ select.form-control-lg {
     // Remove default margin on radios/checkboxes that were used for stacking, and
     // then undo the floating of radios and checkboxes to match.
     .form-check {
-      @if $enable-flex {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      } @else {
-        display: inline-block;
-        vertical-align: middle;
-      }
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: auto;
       margin-top: 0;
       margin-bottom: 0;
@@ -401,22 +369,15 @@ select.form-control-lg {
 
     // Custom form controls
     .custom-control {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       padding-left: 0;
-
-      @if $enable-flex {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      } @else {
-        vertical-align: middle;
-      }
     }
     .custom-control-indicator {
       position: static;
       display: inline-block;
-      @if $enable-flex {
-        margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
-      }
+      margin-right: .25rem; // Flexbox alignment means we lose our HTML space here, so we compensate.
       vertical-align: text-bottom;
     }
 
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 17b9c8402..dc11490c6 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -4,54 +4,34 @@
 
 .input-group {
   position: relative;
+  display: flex;
   width: 100%;
 
-  @if $enable-flex {
-    display: flex;
-  } @else {
-    display: table;
-    // Prevent input groups from inheriting border styles from table cells when
-    // placed within a table.
-    border-collapse: separate;
-  }
-
   .form-control {
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
     z-index: 2;
+    flex: 1 1 auto;
+    // Add width 1% and flex-basis auto to ensure that button will not wrap out
+    // the column. Applies to IE Edge+ and Firefox. Chrome do not require this.
+    width: 1%;
+    margin-bottom: 0;
+
     // Bring the "active" form control to the front
     @include hover-focus-active {
       z-index: 3;
     }
-
-    @if $enable-flex {
-      flex: 1 1 auto;
-      // Add width 1% and flex-basis auto to ensure that button will not wrap out
-      // the column. Applies to IE Edge+ and Firefox. Chrome do not require this.
-      width: 1%;
-    } @else {
-      // IE9 fubars the placeholder attribute in text inputs and the arrows on
-      // select elements in input groups. To fix it, we float the input. Details:
-      // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
-      float: left;
-      width: 100%;
-    }
-    margin-bottom: 0;
   }
 }
 
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  @if $enable-flex {
-    // Vertically centers the content of the addons within the input group
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  } @else {
-    display: table-cell;
-  }
+  // Vertically centers the content of the addons within the input group
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
@@ -60,9 +40,6 @@
 
 .input-group-addon,
 .input-group-btn {
-  @if not $enable-flex {
-    width: 1%;
-  }
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }
@@ -167,11 +144,8 @@
   // element above the siblings.
   > .btn {
     position: relative;
-
-    @if $enable-flex {
-      // Vertically stretch the button and center its content
-      flex: 1;
-    }
+    // Vertically stretch the button and center its content
+    flex: 1;
 
     + .btn {
       margin-left: (-$input-btn-border-width);
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index bc949af30..4d78d95c0 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -3,10 +3,8 @@
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
-  @if $enable-flex {
-    display: flex;
-    flex-direction: column;
-  }
+  display: flex;
+  flex-direction: column;
 
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
@@ -19,15 +17,10 @@
 // Use on `li`s or `div`s within the `.list-group` parent.
 
 .list-group-item {
-  @if $enable-flex {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-  } @else {
-    display: block;
-  }
-
   position: relative;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
diff --git a/scss/_media.scss b/scss/_media.scss
index d1ebbcdeb..5e1408162 100644
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -1,36 +1,14 @@
-@if $enable-flex {
-  .media {
-    display: flex;
-  }
-  .media-body {
-    flex: 1;
-  }
-  .media-middle {
-    align-self: center;
-  }
-  .media-bottom {
-    align-self: flex-end;
-  }
-} @else {
-  .media,
-  .media-body {
-    overflow: hidden;
-  }
-  .media-body {
-    width: 10000px;
-  }
-  .media-left,
-  .media-right,
-  .media-body {
-    display: table-cell;
-    vertical-align: top;
-  }
-  .media-middle {
-    vertical-align: middle;
-  }
-  .media-bottom {
-    vertical-align: bottom;
-  }
+.media {
+  display: flex;
+}
+.media-body {
+  flex: 1;
+}
+.media-middle {
+  align-self: center;
+}
+.media-bottom {
+  align-self: flex-end;
 }
 
 
diff --git a/scss/_nav.scss b/scss/_nav.scss
index 0f635e794..10d5f5c62 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -157,7 +157,7 @@
 }
 
 
-// Justified navigation (flexbox only)
+// Justified navigation
 //
 // Justified nav components are only built for flexbox mode in Bootstrap 4. In
 // previous versions, this component variation was limited to anchor-based nav
@@ -167,13 +167,11 @@
 // Using flexbox, we avoid that problem altogether at the cost of no default
 // justified navigation for default Bootstrap. Sorry, y'all <3.
 
-@if $enable-flex {
-  .nav-justified {
-    display: flex;
+.nav-justified {
+  display: flex;
 
-    .nav-item {
-      flex: 1;
-      text-align: center;
-    }
+  .nav-item {
+    flex: 1;
+    text-align: center;
   }
 }
diff --git a/scss/_type.scss b/scss/_type.scss
index 0880145e0..cb4a035fc 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -137,14 +137,3 @@ mark,
     content: "\00A0 \2014"; // nbsp, em dash
   }
 }
-
-@if not $enable-flex {
-  // Clean up some horizontal `<dl>`s built with grids
-  // scss-lint:disable QualifyingElement
-  dl.row {
-    > dd + dt {
-      clear: left;
-    }
-  }
-  // scss-lint:enable QualifyingElement
-}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2d4c90109..2889d6d49 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -122,7 +122,6 @@ $brand-inverse:             $gray-dark !default;
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-flex:               false !default;
 $enable-rounded:            true !default;
 $enable-shadows:            false !default;
 $enable-gradients:          false !default;
diff --git a/scss/bootstrap-flex.scss b/scss/bootstrap-flex.scss
deleted file mode 100644
index 60dd03a68..000000000
--- a/scss/bootstrap-flex.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// Bootstrap with Flexbox enabled
-//
-// Includes all the imports from the standard Bootstrap project, but enables
-// the flexbox variable.
-
-$enable-flex: true;
-
-@import "bootstrap";
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 2df7b988e..0aa814ab2 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -7,12 +7,8 @@
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-
-    @if $enable-flex {
-      width: 100%;
-    }
+    width: 100%;
+    min-height: 1px; // Prevent columns from collapsing when empty
 
     @include make-gutters($gutters);
   }
@@ -26,24 +22,20 @@
         @extend %grid-column;
       }
     }
-    @if $enable-flex {
-      .col#{$infix} {
-        @extend %grid-column;
-      }
+    .col#{$infix} {
+      @extend %grid-column;
     }
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      @if $enable-flex {
-        .col#{$infix} {
-          flex-basis: 0;
-          flex-grow: 1;
-          max-width: 100%;
-        }
-        .col#{$infix}-auto {
-          flex: 0 0 auto;
-          width: auto;
-        }
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+      .col#{$infix}-auto {
+        flex: 0 0 auto;
+        width: auto;
       }
 
       @for $i from 1 through $columns {
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 402a99e92..23b11dbed 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -5,9 +5,6 @@
 @mixin make-container($gutters: $grid-gutter-widths) {
   margin-left: auto;
   margin-right: auto;
-  @if not $enable-flex {
-    @include clearfix();
-  }
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
@@ -40,12 +37,8 @@
 }
 
 @mixin make-row($gutters: $grid-gutter-widths) {
-  @if $enable-flex {
-    display: flex;
-    flex-wrap: wrap;
-  } @else {
-    @include clearfix();
-  }
+  display: flex;
+  flex-wrap: wrap;
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
@@ -58,14 +51,11 @@
 
 @mixin make-col-ready($gutters: $grid-gutter-widths) {
   position: relative;
-  min-height: 1px; // Prevent collapsing
-
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
   // later on to override this initial width.
-  @if $enable-flex {
-    width: 100%;
-  }
+  width: 100%;
+  min-height: 1px; // Prevent collapsing
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
@@ -77,16 +67,12 @@
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  @if $enable-flex {
-    flex: 0 0 percentage($size / $columns);
-    // Add a `max-width` to ensure content within each column does not blow out
-    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-    // do not appear to require this.
-    max-width: percentage($size / $columns);
-  } @else {
-    float: left;
-    width: percentage($size / $columns);
-  }
+  flex: 0 0 percentage($size / $columns);
+  // width: percentage($size / $columns);
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns);
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index c3efb9d71..4d13e9f8c 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -2,32 +2,30 @@
 //
 // Custom styles for additional flex alignment options.
 
-@if $enable-flex {
-  @each $breakpoint in map-keys($grid-breakpoints) {
-    @include media-breakpoint-up($breakpoint) {
-      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
 
-      // Flex column reordering
-      .flex#{$infix}-first     { order: -1; }
-      .flex#{$infix}-last      { order: 1; }
-      .flex#{$infix}-unordered { order: 0; }
+    // Flex column reordering
+    .flex#{$infix}-first     { order: -1; }
+    .flex#{$infix}-last      { order: 1; }
+    .flex#{$infix}-unordered { order: 0; }
 
-      // Alignment for every item
-      .flex-items#{$infix}-top    { align-items: flex-start; }
-      .flex-items#{$infix}-middle { align-items: center; }
-      .flex-items#{$infix}-bottom { align-items: flex-end; }
+    // Alignment for every item
+    .flex-items#{$infix}-top    { align-items: flex-start; }
+    .flex-items#{$infix}-middle { align-items: center; }
+    .flex-items#{$infix}-bottom { align-items: flex-end; }
 
-      // Alignment per item
-      .flex#{$infix}-top    { align-self: flex-start; }
-      .flex#{$infix}-middle { align-self: center; }
-      .flex#{$infix}-bottom { align-self: flex-end; }
+    // Alignment per item
+    .flex#{$infix}-top    { align-self: flex-start; }
+    .flex#{$infix}-middle { align-self: center; }
+    .flex#{$infix}-bottom { align-self: flex-end; }
 
-      // Horizontal alignment of item
-      .flex-items#{$infix}-left    { justify-content: flex-start; }
-      .flex-items#{$infix}-center  { justify-content: center; }
-      .flex-items#{$infix}-right   { justify-content: flex-end; }
-      .flex-items#{$infix}-around  { justify-content: space-around; }
-      .flex-items#{$infix}-between { justify-content: space-between; }
-    }
+    // Horizontal alignment of item
+    .flex-items#{$infix}-left    { justify-content: flex-start; }
+    .flex-items#{$infix}-center  { justify-content: center; }
+    .flex-items#{$infix}-right   { justify-content: flex-end; }
+    .flex-items#{$infix}-around  { justify-content: space-around; }
+    .flex-items#{$infix}-between { justify-content: space-between; }
   }
 }