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

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;
+  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%;
-    }
+  // 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;
     }