flex_display: Flex display

In cascadess: A Style Pronoun for 'htmltools' Tags

Flex display

Description

The ⁠flex_*()⁠ functions adjust the flexbox layout of an element. The flexbox layout is incredibly powerful and allows centering of elements vertically and horizontally, automatic adjustment of space between and around child elements, and more. To use flexbox make sure to include flex_display() when styling an element. To adjust an element's display at breakpoints see display().

Direct child elements of a flex box container are automatically considered flex items and may be adjusted with the ⁠item_*()⁠ functions, see item_align().

Usage

flex_display(x)

Arguments

x	A tag element or .style pronoun.

Details

Using flexbox, flex_display(), a tag element's child elements are considered flex items. The ⁠item_*()⁠ functions are used to modify the bahvior of these flex items. So, while ⁠flex_*()⁠ functions are applied to the parent element, all the ⁠item_*()⁠ functions are applied to the individual child flex item elements.

Value

An object of the same type as x.

See Also

Other flex utilities: flex_align(), flex_content(), flex_direction(), flex_justify(), flex_wrap(), item_align(), item_fill(), item_grow(), item_order()

Examples

library(htmltools)

div(
  .style %>%
    flex_display() %>%
    flex_justify("end"),
  div("Flex item"),
  div("Flex item"),
  div("Flex item")
)

cascadess documentation built on Oct. 30, 2024, 9:29 a.m.