67 lines
3.4 KiB
HTML
67 lines
3.4 KiB
HTML
[!]
|
|
[=title "Week 11: Flexbox 2"]
|
|
[=content-]
|
|
<p>
|
|
If you haven't already, read <a href="week-8-flexbox-1.html">Flexbox 1</a>.
|
|
</p>
|
|
<p>
|
|
To complete our discussion of flexbox, we need to talk first about <i>axes</i>. The core idea is that a flexbox is
|
|
an <i>axis</i>: it puts content vertically or horizontally. It <i>can</i> violate this with <code>flex-wrap</code>,
|
|
but please don't do that. We say the axis along which content is distributed is the <b>primary axis</b>:
|
|
for default flexboxes, this is left/right (horizontal), but they can also be up/down (vertical).
|
|
</p>
|
|
<p>
|
|
You control the <i>primary</i> axis with the <code>flex-direction</code> property.
|
|
<code>flex-direction: row;</code> will set the flexbox' primary axis to horizontal,
|
|
and <code>flex-direction: column;</code> will set the flexbox' primary axis to vertical.
|
|
The <i>secondary axis</i> will always be the remaining option.
|
|
</p>
|
|
<p>
|
|
Along the secondary axis (up/down for a horizontal flexbox, left/right for a vertical flexbox), elements
|
|
may be centered, stretched, or justified to either end: you do this with the <code>align-items</code>
|
|
property. For instance, <code>align-items: center;</code> will bring all of the elements
|
|
to the center of the secondary axis. This is pretty useful for building centered layouts!
|
|
</p>
|
|
<p>
|
|
Using <code>align-items: center; justify-content: center;</code> centers along both axes (remember, <code>justify-content</code> controls
|
|
the primary axis!), so for example:
|
|
</p>
|
|
<div style="border: 1px dashed white;display:flex;align-items:center;justify-content:center;height:200px;">
|
|
<div style="background-color: red;">Content 1</div>
|
|
<div style="background-color: blue;">Content 2</div>
|
|
</div>
|
|
<p>
|
|
Note that we can also force elements to stretch to fill up the secondary axis with
|
|
<code>align-items: stretch;</code>:
|
|
</p>
|
|
<div style="border: 1px dashed white;display:flex;align-items:stretch;justify-content:center;height:200px;">
|
|
<div style="background-color: red;">Content 1</div>
|
|
<div style="background-color: blue;">Content 2</div>
|
|
</div>
|
|
<p>
|
|
What if we want to mix the two? It turns out that we can do that with the
|
|
<code>align-self</code> property! Note that there is no <code>justify-self</code> property;
|
|
<code>align-self</code> works because of the assumption that there is only one element
|
|
at any point on the secondary axis (an assumption violated by <code>flex-wrap</code>, but we won't talk about that here).
|
|
If we do <code>align-self: center;</code> for the first element...
|
|
</p>
|
|
<div style="border: 1px dashed white;display:flex;align-items:stretch;justify-content:center;height:200px;">
|
|
<div style="background-color: red;align-self: center;">Content 1</div>
|
|
<div style="background-color: blue;">Content 2</div>
|
|
</div>
|
|
<p>
|
|
All three properties also support two strange values: <code>start</code> and <code>end</code>.
|
|
Doing <code>justify-content: end;</code> on the flexbox and <code>align-self: start;</code> on
|
|
the second content:
|
|
</p>
|
|
<div style="border: 1px dashed white;display:flex;align-items:stretch;justify-content:end;height:200px;">
|
|
<div style="background-color: red;align-self: center;">Content 1</div>
|
|
<div style="background-color: blue;align-self: start;">Content 2</div>
|
|
</div>
|
|
<p>
|
|
Strange! <code>end</code> simply means "the furthest point across the axis" - which is usually
|
|
as far right (or as far down) as possible. <code>start</code> just means the opposite.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|