Tyler Clarke
3aef6fa387
All checks were successful
ClarkeIS Build / Build-Docker-Image (push) Successful in 2m34s
144 lines
3.6 KiB
HTML
144 lines
3.6 KiB
HTML
[!]
|
|
[=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><style>
|
|
span {
|
|
background-color: red;
|
|
padding: 5px;
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
}
|
|
</style>
|
|
<div id="container">
|
|
<span> Text 1 </span>
|
|
<span> Text 2 </span>
|
|
<span> Text 3 </span>
|
|
</div>
|
|
</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><style>
|
|
span {
|
|
background-color: red;
|
|
padding: 5px;
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
<div id="container">
|
|
<span> Text 1 </span>
|
|
<span> Text 2 </span>
|
|
<span> Text 3 </span>
|
|
</div>
|
|
</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><style>
|
|
span {
|
|
background-color: red;
|
|
padding: 5px;
|
|
}
|
|
|
|
#container {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
</style>
|
|
<div id="container">
|
|
<span> Text 1 </span>
|
|
<span> Text 2 </span>
|
|
<span> Text 3 </span>
|
|
</div>
|
|
</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]
|