diff --git a/R/flex.R b/R/flex.R
index 5fb263c..7059b7a 100644
--- a/R/flex.R
+++ b/R/flex.R
@@ -54,7 +54,7 @@ flex_wrap <- function(wrap) {
 #' @param direction A [responsive] argument.
 #'
 #'   One of `r rd_list(names(flex_direction_))` specifying the main axis of
-#'   flex items, defaults to `"row"`.
+#'   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.
@@ -64,21 +64,24 @@ flex_wrap <- function(wrap) {
 #'
 #' @param justify A [responsive] argument.
 #'
-#'   One of `r rd_list(names(flex_justify_))` specifying how items are
-#'   arranged on the main axis, defaults to `"start"`.
+#'   One of `r rd_list(names(flex_justify_))` specifying how items are arranged
+#'   on the main axis, defaults to `NULL`, in which case the argument is
+#'   ignored.
 #'
-#'   If `"between"` or `"around"`, items are arranged by evenly sharing the
-#'   space between or around the items.
+#'   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.
 #'
 #' @param align A [responsive] argument.
 #'
-#'   One of `r rd_list(names(flex_align_))` specifying how items are
-#'   arranged on the cross axis, defaults to `"stretch"`.
+#'   One of `r rd_list(names(flex_align_))` specifying how items are arranged on
+#'   the cross axis, defaults to `NULL`, in which case the argument is ignored.
 #'
 #' @param 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 `FALSE`.
+#'   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.
 #'
 #' @includeRmd man/roxygen/flex.Rmd
 #'
@@ -95,8 +98,8 @@ flex_wrap <- function(wrap) {
 #'   div("Lorem ipsum dolor sit amet, consectetuer adipiscing elit.")
 #' )
 #'
-flex <- function(x, direction = "row", justify = "start", align = "stretch",
-                 wrap = FALSE) {
+flex <- function(x, direction = NULL, justify = NULL, align = NULL,
+                 wrap = NULL) {
   assert_subject(x)
 
   classes <- prefix(
@@ -141,10 +144,9 @@ item_fill <- function(fill) {
     abortf("invalid value, expecting %s or %s", "NULL", "TRUE")
   }
 
-  ## fill[fill] <- "fill"
+  fill[fill] <- "fill"
 
-  ## responsive(fill)
-  responsive(set_names(rep_along(fill, "fill"), names(fill)))
+  responsive(fill)
 }
 
 item_grow <- function(grow) {
diff --git a/man/background.Rd b/man/background.Rd
index e123047..abb2fe5 100644
--- a/man/background.Rd
+++ b/man/background.Rd
@@ -121,7 +121,7 @@ It’s panel\if{html}{\out{
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-between cas-flex-items-stretch cas-flex-wrap">
+<div class="cas-d-flex cas-flex-justify-between cas-flex-wrap">
 }}
 \if{html}{\out{
 <div class="cas-m-3">
diff --git a/man/flex.Rd b/man/flex.Rd
index 6c7f4bc..89b047d 100644
--- a/man/flex.Rd
+++ b/man/flex.Rd
@@ -4,7 +4,7 @@
 \alias{flex}
 \title{Flex}
 \usage{
-flex(x, direction = "row", justify = "start", align = "stretch", wrap = FALSE)
+flex(x, direction = NULL, justify = NULL, align = NULL, wrap = NULL)
 }
 \arguments{
 \item{x}{A tag element or \link{.style} pronoun.}
@@ -12,7 +12,7 @@ flex(x, direction = "row", justify = "start", align = "stretch", wrap = FALSE)
 \item{direction}{A \link{responsive} argument.
 
 One of \code{"row"} or \code{"column"} specifying the main axis of
-flex items, defaults to \code{"row"}.
+flex items, defaults to \code{NULL}, in which case the argument is ignored.
 
 If \code{"row"}, the main axis is horizontal and items are arranged from left to
 right. The cross axis is the vertical.
@@ -22,21 +22,24 @@ bottom. The cross axis is the horizontal.}
 
 \item{justify}{A \link{responsive} argument.
 
-One of \code{"start"}, \code{"end"}, \code{"center"}, \code{"between"}, \code{"around"}, or \code{"evenly"} specifying how items are
-arranged on the main axis, defaults to \code{"start"}.
+One of \code{"start"}, \code{"end"}, \code{"center"}, \code{"between"}, \code{"around"}, or \code{"evenly"} specifying how items are arranged
+on the main axis, defaults to \code{NULL}, in which case the argument is
+ignored.
 
-If \code{"between"} or \code{"around"}, items are arranged by evenly sharing the
-space between or around the items.}
+If \code{"between"}, \code{"around"}, or \code{"evenly"} then items are arranged by
+distributing the space available on the main axis in-between the element's
+flex items.}
 
 \item{align}{A \link{responsive} argument.
 
-One of \code{"start"}, \code{"end"}, \code{"center"}, \code{"baseline"}, or \code{"stretch"} specifying how items are
-arranged on the cross axis, defaults to \code{"stretch"}.}
+One of \code{"start"}, \code{"end"}, \code{"center"}, \code{"baseline"}, or \code{"stretch"} specifying how items are arranged on
+the cross axis, defaults to \code{NULL}, in which case the argument is ignored.}
 
 \item{wrap}{A \link{responsive} argument.
 
-One of \code{TRUE} or \code{FALSE} specifying if items are forced onto one line
-or allowed to wrap onto multiple lines, defaults to \code{FALSE}.}
+One of \code{TRUE} or \code{FALSE} specifying if items are forced onto one line or
+allowed to wrap onto multiple lines, defaults to \code{NULL}, in which case the
+argument is ignored.}
 }
 \description{
 The \code{flex()} function adjusts the flex box layout of an element. To use
@@ -70,7 +73,7 @@ allows.\if{html}{\out{<div class="r">}}\preformatted{div(
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-column cas-flex-md-row cas-flex-justify-start cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-column cas-flex-md-row">
 }}
 \if{html}{\out{
 <div id="id" class="form-group shiny-input-radiogroup shiny-input-container cas-m-h-auto cas-m-h-md-0">
@@ -153,7 +156,7 @@ horizontally.\if{html}{\out{<div class="r">}}\preformatted{div(
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-column cas-flex-md-row cas-flex-justify-start cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-column cas-flex-md-row">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -201,7 +204,7 @@ You can keep items as a column by specifying only \code{"column"}.\if{html}{\out
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-column cas-flex-justify-start cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-column">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -253,7 +256,7 @@ beginning of their parent container.\if{html}{\out{<div class="r">}}\preformatte
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-start cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-justify-start">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -308,7 +311,7 @@ We can also push items to the \strong{end}.\if{html}{\out{<div class="r">}}\pref
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-end cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-justify-end">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -363,7 +366,7 @@ Without using a table layout we can \strong{center} items.\if{html}{\out{<div cl
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-center cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-justify-center">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -418,7 +421,7 @@ You can also put space \strong{between} items\if{html}{\out{<div class="r">}}\pr
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-between cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-justify-between">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -473,7 +476,7 @@ A flex item\if{html}{\out{
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-around cas-flex-items-stretch cas-flex-nowrap">
+<div class="cas-d-flex cas-flex-justify-around">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
@@ -534,7 +537,7 @@ Using flexbox we can also control how items wrap onto new lines.\if{html}{\out{<
 <!--html_preserve-->
 }}
 \if{html}{\out{
-<div class="cas-d-flex cas-flex-row cas-flex-justify-start cas-flex-items-stretch cas-flex-wrap">
+<div class="cas-d-flex cas-flex-wrap">
 }}
 \if{html}{\out{
 <div class="cas-p-3 cas-border cas-border-blue cas-border-round-md">
diff --git a/tests/testthat/test-flex.R b/tests/testthat/test-flex.R
index 66b13ba..d1e49d6 100644
--- a/tests/testthat/test-flex.R
+++ b/tests/testthat/test-flex.R
@@ -1,12 +1,26 @@
 context("flex()")
 
+test_that("no classes by default", {
+  flex(div()) %>%
+    expect_s3_class("shiny.tag") %>%
+    expect_html_class("")
+})
+
 test_that("adds classes", {
-  div() %>%
-    flex() %>%
+  flex(div(), direction = "row") %>%
     expect_s3_class("shiny.tag") %>%
     expect_html_class("cas-flex-row")
 
-  div(.style %>% flex()) %>%
+  div(.style %>% flex(wrap = TRUE)) %>%
     expect_s3_class("shiny.tag") %>%
-    expect_html_class("cas-flex-row")
+    expect_html_class("cas-flex-wrap")
+})
+
+test_that("arguments are responsive", {
+  div() %>%
+    flex(
+      direction = c(default = "column", md = "row")
+    ) %>%
+    expect_html_class("cas-flex-md-row") %>%
+    expect_html_class("cas-flex-column")
 })