[!] [=title "Week 11: Flexbox 2"] [=content-]

If you haven't already, read Flexbox 1.

To complete our discussion of flexbox, we need to talk first about axes. The core idea is that a flexbox is an axis: it puts content vertically or horizontally. It can violate this with `flex-wrap`, but please don't do that. We say the axis along which content is distributed is the primary axis: for default flexboxes, this is left/right (horizontal), but they can also be up/down (vertical).

You control the primary axis with the `flex-direction` property. `flex-direction: row;` will set the flexbox' primary axis to horizontal, and `flex-direction: column;` will set the flexbox' primary axis to vertical. The secondary axis will always be the remaining option.

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 `align-items` property. For instance, `align-items: center;` will bring all of the elements to the center of the secondary axis. This is pretty useful for building centered layouts!

Using `align-items: center; justify-content: center;` centers along both axes (remember, `justify-content` controls the primary axis!), so for example:

Content 1
Content 2

Note that we can also force elements to stretch to fill up the secondary axis with `align-items: stretch;`:

Content 1
Content 2

What if we want to mix the two? It turns out that we can do that with the `align-self` property! Note that there is no `justify-self` property; `align-self` works because of the assumption that there is only one element at any point on the secondary axis (an assumption violated by `flex-wrap`, but we won't talk about that here). If we do `align-self: center;` for the first element...

Content 1
Content 2

All three properties also support two strange values: `start` and `end`. Doing `justify-content: end;` on the flexbox and `align-self: start;` on the second content:

Content 1
Content 2

Strange! `end` simply means "the furthest point across the axis" - which is usually as far right (or as far down) as possible. `start` just means the opposite.

[/] [#template.html]