```{r, child = "_setup.Rmd"}
```

## Getting started

This section needs pretty specific examples of how to use flex. I don't know
that people will want a tutorial on flex.

```{r, eval = FALSE}
flex(

)
```

## Different `direction`s

Many of `flex()`'s arguments are viewport responsive and below we will see how
useful this can be. On small screens the flex items are placed vertically and
can occupy the full width of the mobile device. On medium or larger screens the
items are placed horizontally once again.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(
      direction = list(xs = "column", md = "row")  # <-
    ) %>%
    background("secondary") %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

*Resize the browser for this example.*

You can keep items as a column by specifying only `"column"`.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex("column"),  # <-
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

## Spacing items with `justify`

Below is a series of examples showing how to change the horizontal alignment of
your flex items. Let's start by pushing items to the beginning of their parent
container.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(justify = "start"),  # <-
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

We can also push items to the **end**.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(justify = "end"),  # <-
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

Without using a table layout we can **center** items.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(justify = "center"),  # <-
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

You can also put space **between** items

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(justify = "between"),  # <-
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

... or put space **around** items.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(justify = "around"),  # <-
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```

The `"between"` and `"around"` values come from the original CSS values
`"space-between"` and `"space-around"`.

### Wrap onto new lines

Using flexbox we can also control how items wrap onto new lines.

```{r}
div(
  .style %>%
    display("flex") %>%
    flex(wrap = TRUE),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border(),
  div("A flex item") %>%
    padding(3) %>%
    border()
)
```
