flex: Flex

In cascadess: A Style Pronoun for 'htmltools' Tags

Description

The flex() function adjusts the flex box layout of an element. To use the flex box layout the element must also use the flex display, see display(). The flex box layout is incredibly powerful and allows centering of elements vertically or horizontally, automatic adjustment of space between or around child elements, and more.

Direct child elements of a flex box container are automatically considered flex items and may be adjusted with item().

Usage

flex(x, direction = NULL, justify = NULL, align = NULL, wrap = NULL)

Arguments

x	A tag element or .style pronoun.
direction	A responsive argument. One of "row" or "column" specifying the main axis of flex items, defaults to NULL, in which case the argument is ignored. If "row", the main axis is horizontal and items are arranged from left to right. The cross axis is the vertical. If "column", the main axis is vertical and items are arranged from top to bottom. The cross axis is the horizontal.
justify	A responsive argument. One of "start", "end", "center", "between", "around", or "evenly" specifying how items are arranged on the main axis, defaults to NULL, in which case the argument is ignored. If "between", "around", or "evenly" then items are arranged by distributing the space available on the main axis in-between the element's flex items.
align	A responsive argument. One of "start", "end", "center", "baseline", or "stretch" specifying how items are arranged on the cross axis, defaults to NULL, in which case the argument is ignored.
wrap	A responsive argument. One of TRUE or FALSE specifying if items are forced onto one line or allowed to wrap onto multiple lines, defaults to NULL, in which case the argument is ignored.

Centering elements

Center an input above a larger element or next to the element if space allows.

div(
  .style %>%
    display("flex") %>%
    flex(direction = c(default = "column", md = "row")),

  radioButtons("id", "A sample input", c("Choice 1", "Choice 2")) %>%
    margin(h = c(xs = "auto", md = 0)),

  div(
    .style %>%
      width(100) %>%
      background("indigo") %>%
      text("white"),
    "Plot placeholder"
  )
)

html_preserve

A sample input

Choice 1

Choice 2

Plot placeholder

/html_preserve

Details

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

For the sake of the demo let’s create a flex item help function.

flexItem <- function(...) {
  div(
    .style %>% padding(3) %>% border("blue"),
    "A flex item",
    ...
  )
}

Different directions

Many of flex()’s arguments are viewport responsive. 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.

div(
  .style %>%
    display("flex") %>%
    flex(
      direction = c(xs = "column", md = "row")  # <-
    ),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

/html_preserve

Resize the browser for this example.

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

div(
  .style %>%
    display("flex") %>%
    flex(direction = "column"),  # <-
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

/html_preserve

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.

div(
  .style %>%
    display("flex") %>%
    flex(justify = "start"),  # <-
  flexItem(),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

A flex item

/html_preserve

We can also push items to the end.

div(
  .style %>%
    display("flex") %>%
    flex(justify = "end"),  # <-
  flexItem(),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

A flex item

/html_preserve

Without using a table layout we can center items.

div(
  .style %>%
    display("flex") %>%
    flex(justify = "center"),  # <-
  flexItem(),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

A flex item

/html_preserve

You can also put space between items

div(
  .style %>%
    display("flex") %>%
    flex(justify = "between"),  # <-
  flexItem(),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

A flex item

/html_preserve

… or put space around items.

div(
  .style %>%
    display("flex") %>%
    flex(justify = "around"),  # <-
  flexItem(),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

A flex item

/html_preserve

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.

div(
  .style %>%
    display("flex") %>%
    flex(wrap = TRUE),
  flexItem(),
  flexItem(),
  flexItem(),
  flexItem()
)

html_preserve

A flex item

A flex item

A flex item

A flex item

/html_preserve

Examples

library(htmltools)

div(
  .style %>%
    display("flex") %>%
    flex(justify = "end"),
  div("Aliquam posuere."),
  div("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.")
)

cascadess documentation built on Jan. 13, 2021, 5:10 p.m.