[!]
[=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]