upload 42 minutes past the nick of time

site/introwebdev/week-8-flexbox-1.html

@@ -0,0 +1,143 @@
+[!]
+[=title "Week 8: Flexbox 1"]
+[=content-]
+<p>
+Finally, the oft-teased flexbox arrives! We're not covering all of flexbox in part 1 (there's a LOT), but we'll go over some basic properties and the rough idea.
+</p>
+<p>
+Flexbox is the clever answer to positioning being hard. Rather than having to use terrible absolute positioning tricks,
+flexboxes generalize to <i>almost every hard problem</i> - centering, space distribution, automatic reflow (e.g. stacking vertically when screens are too small for horizontal),
+etc, and you can do <i>all of this without JavaScript</i>. This is the simplest flexbox: 
+</p>
+<pre><code>&lt;style&gt;
+span {
+	background-color: red;
+	padding: 5px;
+}
+
+#container {
+	display: flex;
+}
+&lt;/style&gt;
+&lt;div id="container"&gt;
+	&lt;span&gt; Text 1 &lt;/span&gt;
+	&lt;span&gt; Text 2 &lt;/span&gt;
+	&lt;span&gt; Text 3 &lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+
+<p>
+Produces:
+</p>
+<style>
+span.flex-example-1 {
+	background-color: red;
+	padding: 5px;
+}
+
+#container.flex-example-1 {
+	display: flex;
+}
+</style>
+<div id="container" class="flex-example-1">
+	<span class="flex-example-1"> Text 1 </span>
+	<span class="flex-example-1"> Text 2 </span>
+	<span class="flex-example-1"> Text 3 </span>
+</div>
+
+<p>
+Note the <code>display: flex;</code> - that div is a flexbox! That's all it takes. Unfortunately, this also isn't very <i>useful</i>. Let's make it more interesting
+with the <code>justify-content</code> property:
+</p>
+
+<pre><code>&lt;style&gt;
+span {
+	background-color: red;
+	padding: 5px;
+}
+
+#container {
+	display: flex;
+	justify-content: center;
+}
+&lt;/style&gt;
+&lt;div id="container"&gt;
+	&lt;span&gt; Text 1 &lt;/span&gt;
+	&lt;span&gt; Text 2 &lt;/span&gt;
+	&lt;span&gt; Text 3 &lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+
+<p>
+Produces:
+</p>
+<style>
+span.flex-example-2 {
+	background-color: red;
+	padding: 5px;
+}
+
+#container.flex-example-2 {
+	display: flex;
+	justify-content: center;
+}
+</style>
+<div id="container" class="flex-example-2">
+	<span class="flex-example-2"> Text 1 </span>
+	<span class="flex-example-2"> Text 2 </span>
+	<span class="flex-example-2"> Text 3 </span>
+</div>
+<p>
+	Nice, fully centered. What about spacing?
+</p>
+<pre><code>&lt;style&gt;
+span {
+	background-color: red;
+	padding: 5px;
+}
+
+#container {
+	display: flex;
+	justify-content: space-evenly;
+}
+&lt;/style&gt;
+&lt;div id="container"&gt;
+	&lt;span&gt; Text 1 &lt;/span&gt;
+	&lt;span&gt; Text 2 &lt;/span&gt;
+	&lt;span&gt; Text 3 &lt;/span&gt;
+&lt;/div&gt;
+</code></pre>
+
+<p>
+Produces:
+</p>
+<style>
+span.flex-example-3 {
+	background-color: red;
+	padding: 5px;
+}
+
+#container.flex-example-3 {
+	display: flex;
+	justify-content: space-evenly;
+}
+</style>
+<div id="container" class="flex-example-3">
+	<span class="flex-example-3"> Text 1 </span>
+	<span class="flex-example-3"> Text 2 </span>
+	<span class="flex-example-3"> Text 3 </span>
+</div>
+<p>
+Useful! Note how hard it would be to produce this effect without using flexbox. There are a few other properties for <code>justify-content</code>, all of which are listed
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-content">on MDN</a>.
+</p>
+<p>
+I hope you can see how powerful flexbox is. We're past the point where you know enough to start building websites, so now it's time to start thinking about <i>designing</i> websites-
+flexbox is going to be one of the most effective tools in your arsenal. I would highly recommend practicing on your own!
+</p>
+<p>
+There is a LOT more to flexbox, which we'll be covering over the next few weeks; you can get ahead by reading <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">the CSS-Tricks guide to Flexbox</a>.
+While it's advanced, it's a good reference.
+</p>
+[/]
+[#template.html]