flex | R Documentation |
Use flex()
to control how a flex container tag element places its flex
items or child tag elements. For more on turning a tag element into a flex
container see display()
. By default tag elements within a flex container
are treated as flex items.
flex( x, direction = NULL, justify = NULL, align = NULL, wrap = NULL, reverse = NULL )
x |
A tag element or .style pronoun. |
direction |
A responsive argument. One of |
justify |
A responsive argument. One of |
align |
A responsive argument. One of |
wrap |
A responsive argument. One of |
reverse |
A responsive argument. One of |
This section needs pretty specific examples of how to use flex. I don’t know that people will want a tutorial on flex.
flex( )
direction
sMany 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.
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"
.
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() )
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"), # <- 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.
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.
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
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.
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"
.
Using flexbox we can also control how items wrap onto new lines.
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() )
Other design utilities:
active()
,
affix()
,
background()
,
border()
,
display()
,
float()
,
font()
,
height()
,
margin()
,
padding()
,
scroll()
,
shadow()
,
width()
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.