initial work for hstack and vstack

css/layout.scss

@@ -34,16 +34,24 @@
 
 .reveal .r-vstack {
 	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
 .reveal .r-hstack {
 	flex-direction: row;
-}
-
-.reveal .items-center {
 	align-items: center;
-}
-
-.reveal .justify-center {
 	justify-content: center;
 }
+
+// Naming based on tailwindcss
+.reveal .items-stretch { align-items: stretch; }
+.reveal .items-start { align-items: flex-start; }
+.reveal .items-center { align-items: center; }
+.reveal .items-end { align-items: flex-end; }
+
+.reveal .justify-between { justify-content: space-between; }
+.reveal .justify-around { justify-content: space-around; }
+.reveal .justify-start { justify-content: flex-start; }
+.reveal .justify-center { justify-content: center; }
+.reveal .justify-end { justify-content: flex-end; }

examples/layout-helpers.html

@@ -24,6 +24,8 @@
 					<ul>
 						<li><a href="#/stretch">Stretch</a></li>
 						<li><a href="#/stack">Stack</a></li>
+						<li><a href="#/hstack">HStack</a></li>
+						<li><a href="#/vstack">VStack</a></li>
 					</ul>
 				</section>
 
@@ -74,6 +76,27 @@
 					</div>
 				</section>
 
+				<section id="hstack">
+					<h2>HStack</h2>
+					<p>Stacks multiple elements horizontally.</p>
+					<pre><code class="html" data-trim data-line-numbers>
+					  <div class="r-hstack">
+					    &lt;img width="450" height="300" src="..."&gt;
+					    &lt;img width="300" height="450" src="..."&gt;
+					    &lt;img width="400" height="400" src="..."&gt;
+					  </div>
+					</code></pre>
+				</section>
+
+				<section data-auto-animate>
+					<h2>HStack Example</h2>
+					<div class="r-hstack">
+						<p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
+						<p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
+						<p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
+					</div>
+				</section>
+
 			</div>
 
 		</div>