Flexbox

class: middle, center

# Flexbox

---

# Limitations with Float and Position

- How can you center an element vertically?
- How can you make sibling elements take up equal width/height regardless of available width/height?
- How can you make multiple columns have similar height regardless of their content?

---

# Flexible Box Module

[MDN: Basic Concepts of Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

- One dimensional layout
- Can flexibly distribute available space
- Can flexibly align elements

---
class: center, middle

`display: flex;`

Declaration for the container.

---

# Two Axes

Defined by `flex-direction` property

- `row` vs `column`
- Can be reversed, like `row-reverse`

.eight[Main axis] and .eight[Cross axis] depend on this value.

---
class: middle, center

![Main axis along row](https://mdn.mozillademos.org/files/15614/Basics1.png)

---
class: middle, center

![Cross axis along row](https://mdn.mozillademos.org/files/15616/Basics3.png)

---
class: middle, center

![Main axis along column](https://mdn.mozillademos.org/files/15615/Basics2.png)

---
class: middle, center

![Cross axis along column](https://mdn.mozillademos.org/files/15617/Basics4.pn://mdn.mozillademos.org/files/15617/Basics4.png)

---

# Start & End

Not Left & Right. Flexbox is language agnostic.

![LTR language, start on left](https://mdn.mozillademos.org/files/15618/Basics5.png)

![RTL language, start on right](https://mdn.mozillademos.org/files/15619/Basics6.png)

---

# Default Flex Container

- Items display in row from starting edge
- Items don't stretch to fill main axis
- Items stretch to fill cross axis
- `flex-basis: auto;`*
- `flex-wrap: nowrap;`*

\* We'll get to these later.

---

# Flexible Space

Properties on flex container affect items within:

- `justify-content` property aligns items on Main axis
- `align-items` property aligns items on Cross axis
-  Initial values are `flex-start` and `stretch`

---

# Align Items

- `stretch`
- `flex-start`
- `flex-end`
- `center`

---

# Justify Content

- `flex-start`
- `flex-end`
- `space-around`
- `space-between`
- `space-evenly`

---

# Flexbox Sidebar

- Which element is the container?
- `display: flex;`

# [Codepen Example](https://codepen.io/zachfedor/pen/zYOeVxa?editors=1100#0)

Compare to [Floating Sidebar](https://codepen.io/zachfedor/pen/MWgLxoG?editors=1100) example

---

# Floating Columns

- Horizontally stacking blocks within a container
- Can be any element, usually block level elements
- Don't forget `box-sizing: border-box;` to make math easier

# [Codepen Example](https://codepen.io/zachfedor/pen/eYOxwGj?editors=1100#0)

Compare to [Floating Columns](https://codepen.io/zachfedor/pen/aboXMpP?editors=1100#0) example

---

# .fourteen[Try It Out]

# [Flexbox Froggy](https://flexboxfroggy.com/)

---

# .fourteen[Exercise]

# [Interneting Is Hard: Flexbox](https://internetingishard.com/html-and-css/flexbox/)

---

# More Resources:

- [MDN: Learn Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
- [CSS-Tricks: A Complete Guide To Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Codrops: Flexbox Reference](https://tympanus.net/codrops/css_reference/flexbox/)