Working on flex docs

docs/source/_layouts/master.blade.php

@@ -95,9 +95,9 @@
                             <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/container" class="{{ $page->active('/container/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Container</a></li>
                             <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/display" class="{{ $page->active('/display/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
                             <li class="mb-3">
-                                <a href="{{ $page->baseUrl }}/styles/flexbox/containers" class="block mb-2 {{ $page->active('/flexbox/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
+                                <a href="{{ $page->baseUrl }}/styles/flexbox/display" class="block mb-2 {{ $page->active('/flexbox/') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Flexbox</a>
                                 <ul class="pl-4 {{ $page->active('/flexbox/') ? 'block' : 'hidden' }}">
-                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/containers" class="{{ $page->active('/flexbox/containers') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Containers</a></li>
+                                    <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/display" class="{{ $page->active('/flexbox/display') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Display</a></li>
                                     <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/direction" class="{{ $page->active('/direction') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Direction</a></li>
                                     <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/wrapping" class="{{ $page->active('/wrapping') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Wrapping</a></li>
                                     <li class="mb-3"><a href="{{ $page->baseUrl }}/styles/flexbox/justify-content" class="{{ $page->active('/justify-content') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Justify Content</a></li>

docs/source/styles/flexbox/display.blade.md

@@ -1,11 +1,11 @@
 ---
 extends: _layouts.markdown
-title: "Flex Containers"
+title: "Display – Flexbox"
 ---
 
 <div class="font-semibold text-slate-light text-base uppercase tracking-wide mb-2">Flexbox</div>
 
-# Flex Containers
+# Display
 
 <div class="subnav">
     <a class="subnav-link" href="#usage">Usage</a>

docs/source/styles/flexbox/flex-grow-shrink.blade.md

@@ -15,9 +15,7 @@ title: "Flexbox"
 
 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.
 
-## Flex
-
-### 1
+## Flex 1
 
 Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's initial size:
 
@@ -62,7 +60,7 @@ Use `.flex-1` to allow a flex item to grow and shrink as needed, ignoring it's i
 @endslot
 @endcomponent
 
-### Auto
+## Auto
 
 Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it's initial size:
 
@@ -107,7 +105,7 @@ Use `.flex-auto` to allow a flex item to grow and shrink, taking into account it
 @endslot
 @endcomponent
 
-### None
+## None
 
 Use `.flex-none` to prevent a flex item from growing or shrinking:
 
@@ -125,7 +123,7 @@ Use `.flex-none` to prevent a flex item from growing or shrinking:
 </div>
 @endcomponent
 
-### Initial
+## Initial
 
 Use `.flex-initial` to allow a flex item to shrink but not grow, taking into account it's initial size *(this is also the default behavior)*:
 
@@ -177,11 +175,7 @@ Use `.flex-initial` to allow a flex item to shrink but not grow, taking into acc
 @endslot
 @endcomponent
 
----
-
-## Flex Grow
-
-### Grow
+## Grow
 
 Use `.flex-grow` to allow a flex item to grow to fill any available space:
 
@@ -199,7 +193,7 @@ Use `.flex-grow` to allow a flex item to grow to fill any available space:
 </div>
 @endcomponent
 
-### Don't grow
+## Don't grow
 
 Use `.flex-no-grow` to prevent a flex item from growing:
 
@@ -217,11 +211,7 @@ Use `.flex-no-grow` to prevent a flex item from growing:
 </div>
 @endcomponent
 
----
-
-## Flex shrink
-
-### Shrink
+## Shrink
 
 Use `.flex-shrink` to allow a flex item to shrink if needed:
 
@@ -239,7 +229,7 @@ Use `.flex-shrink` to allow a flex item to shrink if needed:
 </div>
 @endcomponent
 
-### Don't shrink
+## Don't shrink
 
 Use `.flex-no-shrink` to prevent a flex item from shrinking: