remove old flex utils, update docs to match

docs/_includes/nav-home.html

@@ -25,7 +25,7 @@
     </nav>
     {% endcomment %}
 
-    <div class="d-flex flex-items-between hidden-lg-up">
+    <div class="d-flex justify-content-between hidden-lg-up">
       <a class="navbar-brand" href="{{ site.baseurl }}/">
         Bootstrap
       </a>

docs/components/list-group.md

@@ -27,19 +27,19 @@ The most basic list group is simply an unordered list with list items, and the p
 
 ## Badge
 
-Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
+Add badges to any list group item to show unread counts, activity, and more with the help of some utilities. Note the [`justify-content-between` utility class]({{ site.baseurl }}/layout/grid/#horizontal-alignment), the badge's placement, and the lack of a float and margin utilities on the badges.
 
 {% highlight html %}
 <ul class="list-group">
-  <li class="list-group-item flex-items-between">
+  <li class="list-group-item justify-content-between">
     Cras justo odio
     <span class="badge badge-default badge-pill">14</span>
   </li>
-  <li class="list-group-item flex-items-between">
+  <li class="list-group-item justify-content-between">
     Dapibus ac facilisis in
     <span class="badge badge-default badge-pill">2</span>
   </li>
-  <li class="list-group-item flex-items-between">
+  <li class="list-group-item justify-content-between">
     Morbi leo risus
     <span class="badge badge-default badge-pill">1</span>
   </li>

docs/components/navbar.md

@@ -202,7 +202,7 @@ Place various form controls and components within a navbar with `.form-inline`.
 Align the contents of your inline forms with utilities as needed.
 
 {% example html %}
-<nav class="navbar navbar-light bg-faded flex-items-right">
+<nav class="navbar navbar-light bg-faded justify-content-end">
   <form class="form-inline">
     <input class="form-control mr-sm-2" type="text" placeholder="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

docs/examples/album/index.html

@@ -39,7 +39,7 @@
       </div>
     </div>
     <div class="navbar navbar-inverse bg-inverse">
-      <div class="container d-flex flex-items-between">
+      <div class="container d-flex justify-content-between">
         <a href="#" class="navbar-brand">Album</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>

docs/examples/justified-nav/index.html

@@ -30,7 +30,7 @@
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-toggleable-md" id="navbarCollapse">
-            <ul class="nav navbar-nav text-md-center flex-items-md-between">
+            <ul class="nav navbar-nav text-md-center justify-content-md-between">
               <li class="nav-item active">
                 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
               </li>

docs/layout/grid.md

@@ -204,7 +204,7 @@ Using the `col-{breakpoint}-auto` classes, columns can size itself based on the
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-md-center">
+  <div class="row justify-content-md-center">
     <div class="col col-lg-2">
       1 of 3
     </div>
@@ -304,10 +304,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 
 ### Vertical alignment
 
-<div class="bd-example-row">
+<div class="bd-example-row bd-example-row-flex-cols">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-top">
+  <div class="row align-items-start">
     <div class="col">
       One of three columns
     </div>
@@ -318,7 +318,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-middle">
+  <div class="row align-items-center">
     <div class="col">
       One of three columns
     </div>
@@ -329,7 +329,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of three columns
     </div>
   </div>
-  <div class="row flex-items-bottom">
+  <div class="row align-items-end">
     <div class="col">
       One of three columns
     </div>
@@ -348,13 +348,13 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 {% example html %}
 <div class="container">
   <div class="row">
-    <div class="col flex-top">
+    <div class="col align-self-start">
       One of three columns
     </div>
-    <div class="col flex-middle">
+    <div class="col align-self-center">
       One of three columns
     </div>
-    <div class="col flex-bottom">
+    <div class="col align-self-end">
       One of three columns
     </div>
   </div>
@@ -367,7 +367,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
-  <div class="row flex-items-left">
+  <div class="row justify-content-start">
     <div class="col-4">
       One of two columns
     </div>
@@ -375,7 +375,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-center">
+  <div class="row justify-content-center">
     <div class="col-4">
       One of two columns
     </div>
@@ -383,7 +383,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-right">
+  <div class="row justify-content-end">
     <div class="col-4">
       One of two columns
     </div>
@@ -391,7 +391,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-around">
+  <div class="row justify-content-around">
     <div class="col-4">
       One of two columns
     </div>
@@ -399,7 +399,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
       One of two columns
     </div>
   </div>
-  <div class="row flex-items-between">
+  <div class="row justify-content-between">
     <div class="col-4">
       One of two columns
     </div>

scss/utilities/_flex.scss

@@ -11,27 +11,6 @@
     .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 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; }
-
-    //
-    // New flex utils to replace and extend the ones above
-    //
-
     .flex#{$infix}-fill { flex: 1 1 auto; }
     .flex#{$infix}-justify { flex: 1 1 100%; }