diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index f8f3a1036..bea37ce58 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -11,9 +11,9 @@
     <body class="pb-12">
         <div class="bg-gradient-brand h-3"></div>
         <header class="container">
-            <div class="py-6 flex-y-center flex-spaced">
-                <div class="flex-y-center">
-                    <div class="pill h-12 w-12 bg-light p-2 flex-center flex-inline shadow-2 mr-4">
+            <div class="py-6 flex items-center justify-between">
+                <div class="flex items-center">
+                    <div class="pill h-12 w-12 bg-light p-2 inline-flex items-center justify-center shadow-2 mr-4">
                         <svg class="fit w-full" viewBox="0 0 60 36" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="0%" y1="0%" y2="100%" id="a"><stop stop-color="#2383AE" offset="0%"></stop><stop stop-color="#6DD7B9" offset="100%"></stop></linearGradient></defs><path d="M15 12c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5zM0 30c2-8 7-12 15-12 12 0 13.5 9 19.5 10.5 4 1 7.5-.5 10.5-4.5-2 8-7 12-15 12-12 0-13.5-9-19.5-10.5-4-1-7.5.5-10.5 4.5z" fill="url(#a)" fill-rule="evenodd"></path></svg>
                     </div>
                     <svg class="h-4" viewBox="0 0 136 19" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Tailwind CSS">
diff --git a/docs/source/borders.md b/docs/source/borders.md
index 5d4fd2d43..b2022d724 100644
--- a/docs/source/borders.md
+++ b/docs/source/borders.md
@@ -17,7 +17,7 @@ title: "Borders"
 
 Construct border size utilities using the `.border{-side?}{-width?}` syntax. For example, `.border` would add a `1px` border to all sides of the element, where `.border-b-4` would add a `4px` border to the bottom of the element. By default, borders are `solid`, and use the `@default-border-color`.
 
-<div class="flex flex-top mt-8 text-sm leading-none">
+<div class="flex items-start mt-8 text-sm leading-none">
     <div class="pr-12">
         <div class="mb-3 text-dark-soft text-uppercase">Class</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">border</code></div>
diff --git a/docs/source/examples.blade.php b/docs/source/examples.blade.php
index 5e94cce0b..3ade774d6 100644
--- a/docs/source/examples.blade.php
+++ b/docs/source/examples.blade.php
@@ -93,9 +93,9 @@
         <div class="rounded-l w-128 text-center overflow-hidden">
             <img class="h-64" src="/img/card-left.jpg" alt="">
         </div>
-        <div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex-col flex-spaced">
+        <div class="border-t border-r border-b border-dark-softer rounded-r p-4 flex flex-col justify-between">
             <div>
-                <p class="text-sm text-dark-softer flex-y-center">
+                <p class="text-sm text-dark-softer flex items-center">
                     <svg class="text-dark-softest w-3 h-3 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 8V6a6 6 0 1 1 12 0v2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h1zm5 6.73V17h2v-2.27a2 2 0 1 0-2 0zM7 6v2h6V6a3 3 0 0 0-6 0z"/></svg>
                     Members only
                 </p>
@@ -104,7 +104,7 @@
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
                 </p>
             </div>
-            <div class="flex-y-center">
+            <div class="flex items-center">
                 <img class="w-10 h-10 pill mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="">
                 <div class="text-sm">
                     <p class="text-dark leading-none">Jonathan Reinink</p>
diff --git a/docs/source/spacing.md b/docs/source/spacing.md
index 18d7066b9..276bcbf99 100644
--- a/docs/source/spacing.md
+++ b/docs/source/spacing.md
@@ -15,7 +15,7 @@ title: "Spacing"
 
 The syntax below is combined to create a system for padding and margins. For example, `.pt-2` would add padding to the top of the element to the value of `0.5rem` and `.mx-0` would make the horizontal margin zero.
 
-<div class="flex flex-top mt-8 text-sm">
+<div class="flex items-start mt-8 text-sm">
     <div class="pr-12">
         <div class="mb-3 text-dark-soft text-uppercase">Class</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 mono border rounded">p</code> Padding</div>
