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

1 files changed, 21 insertions, 57 deletions

diff --git a/scss/_card.scss b/scss/_card.scss
index c3b9315182..3cbd1998a1 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;