From f4bddeed5604ecf3a53bb9518213a31202f3e919 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Fri, 27 Oct 2017 13:41:48 -0400
Subject: [PATCH] Add responsive align self example

---
 .../styles/flexbox/align-content.blade.md     |  2 +-
 .../styles/flexbox/align-items.blade.md       |  4 +-
 .../source/styles/flexbox/align-self.blade.md | 71 ++++++++++++++++---
 3 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/docs/source/styles/flexbox/align-content.blade.md b/docs/source/styles/flexbox/align-content.blade.md
index 700e1a3ec..e02bd0c2e 100644
--- a/docs/source/styles/flexbox/align-content.blade.md
+++ b/docs/source/styles/flexbox/align-content.blade.md
@@ -239,7 +239,7 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @slot('code')
-<div class="none:content-start sm:content-end md:content-center lg:content-between xl:content-around">
+<div class="none:content-start sm:content-end md:content-center lg:content-between xl:content-around ...">
     <!-- ... -->
 </div>
 @endslot
diff --git a/docs/source/styles/flexbox/align-items.blade.md b/docs/source/styles/flexbox/align-items.blade.md
index 364213c11..c6c65ac85 100644
--- a/docs/source/styles/flexbox/align-items.blade.md
+++ b/docs/source/styles/flexbox/align-items.blade.md
@@ -78,7 +78,7 @@ Use `.items-baseline` to align items along the flex container's cross axis such
 
 ## Responsive
 
-To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.
+To control the alignment of flex items at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:items-center` to apply the `items-center` utility at only medium screen sizes and above.
 
 For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
 
@@ -119,7 +119,7 @@ For more information about Tailwind's responsive design features, check out the
 </div>
 @endslot
 @slot('code')
-<div class="none:items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline">
+<div class="none:items-stretch sm:items-start md:items-center lg:items-end xl:items-baseline ...">
     <!-- ... -->
 </div>
 @endslot
diff --git a/docs/source/styles/flexbox/align-self.blade.md b/docs/source/styles/flexbox/align-self.blade.md
index 231eb44e0..299a2635f 100644
--- a/docs/source/styles/flexbox/align-self.blade.md
+++ b/docs/source/styles/flexbox/align-self.blade.md
@@ -6,15 +6,15 @@ category: "Flexbox"
 
 # Align Self
 
-<div class="subnav">
-    <a class="subnav-link" href="#usage">Usage</a>
-    <a class="subnav-link" href="#responsive">Responsive</a>
-    <a class="subnav-link" href="#customizing">Customizing</a>
+<div class="text-xl text-slate-light">
+    Utilities for controlling how an individual flex item is positioned along its container's cross axis.
 </div>
 
-Tailwind provides a comprehensive set of Flexbox utilities out of the box to make it easy for you to implement complex layouts without having to write any new CSS.
+<div class="subnav">
+    <a class="subnav-link" href="#responsive">Responsive</a>
+</div>
 
-<h2>Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span></h2>
+### Auto <span class="ml-2 font-semibold text-slate-light text-sm uppercase tracking-wide">Default</span>
 
 Use `.self-auto` to align an item based on the flex container's `align-items` value:
 
@@ -26,7 +26,7 @@ Use `.self-auto` to align an item based on the flex container's `align-items` va
 </div>
 @endcomponent
 
-## Start
+### Start
 
 Use `.self-start` to align an item to the start of the flex container's cross axis, despite the container's `align-items` value:
 
@@ -38,7 +38,7 @@ Use `.self-start` to align an item to the start of the flex container's cross ax
 </div>
 @endcomponent
 
-## Center
+### Center
 
 Use `.self-center` to align an item along the center of the flex container's cross axis, despite the container's `align-items` value:
 
@@ -50,7 +50,7 @@ Use `.self-center` to align an item along the center of the flex container's cro
 </div>
 @endcomponent
 
-## End
+### End
 
 Use `.self-end` to align an item to the end of the flex container's cross axis, despite the container's `align-items` value:
 
@@ -62,7 +62,7 @@ Use `.self-end` to align an item to the end of the flex container's cross axis,
 </div>
 @endcomponent
 
-## Stretch
+### Stretch
 
 Use `.self-stretch` to stretch an item to fill the flex container's cross axis, despite the container's `align-items` value:
 
@@ -73,3 +73,54 @@ Use `.self-stretch` to stretch an item to fill the flex container's cross axis,
     <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
 </div>
 @endcomponent
+
+## Responsive
+
+To control the alignment of a flex item at a specific breakpoint, add a `{breakpoint}:` prefix to any existing utility class. For example, use `md:self-end` to apply the `self-end` utility at only medium screen sizes and above.
+
+For more information about Tailwind's responsive design features, check out the [Responsive Design](#) documentation.
+
+@component('_partials.responsive-code-sample')
+@slot('none')
+<div class="flex items-stretch bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="self-auto flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('sm')
+<div class="flex items-stretch bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="self-start flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('md')
+<div class="flex items-stretch bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="self-end flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('lg')
+<div class="flex items-stretch bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="self-center flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('xl')
+<div class="flex items-stretch bg-smoke-light h-24">
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">1</div>
+    <div class="self-stretch flex-1 text-slate-dark text-center bg-smoke-dark px-4 py-2 m-2">2</div>
+    <div class="flex-1 text-slate text-center bg-smoke px-4 py-2 m-2">3</div>
+</div>
+@endslot
+@slot('code')
+<div class="items-stretch ...">
+    <!-- ... -->
+    <div class="none:self-auto sm:self-start md:self-end lg:self-center xl:self-stretch ...">2</div>
+    <!-- ... -->
+</div>
+@endslot
+@endcomponent