initial work for hstack and vstack
This commit is contained in:
parent
f0b67ad6ea
commit
cd5161ffe9
|
@ -34,16 +34,24 @@
|
||||||
|
|
||||||
.reveal .r-vstack {
|
.reveal .r-vstack {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reveal .r-hstack {
|
.reveal .r-hstack {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .items-center {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .justify-center {
|
|
||||||
justify-content: 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; }
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -24,6 +24,8 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#/stretch">Stretch</a></li>
|
<li><a href="#/stretch">Stretch</a></li>
|
||||||
<li><a href="#/stack">Stack</a></li>
|
<li><a href="#/stack">Stack</a></li>
|
||||||
|
<li><a href="#/hstack">HStack</a></li>
|
||||||
|
<li><a href="#/vstack">VStack</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
@ -74,6 +76,27 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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">
|
||||||
|
<img width="450" height="300" src="...">
|
||||||
|
<img width="300" height="450" src="...">
|
||||||
|
<img width="400" height="400" src="...">
|
||||||
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue