Flex display

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.

Value

An object of the same type as x.

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.

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")
)
#> <div class="d-flex justify-content-end">
#>   <div>Flex item</div>
#>   <div>Flex item</div>
#>   <div>Flex item</div>
#> </div>