Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Flex

  • Direction
  • Justify Content
  • Align Items
  • Align Self
  • Align Content
  • Fill
  • Grow
  • Shrink
  • Wrap
  • Order

Direction

Flex Direction Utilities set the flex-direction property, use the format flex-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., flex-md-row).

Utility Value
flex-row row
flex-row-reverse row-reverse
flex-column column
flex-column-reverse column-reverse

Justify Content

Justify Content Utilities set the justify-content property, use the format justify-content-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., justify-content-md-center).

Utility Value
justify-content-start flex-start
justify-content-center center
justify-content-end flex-end
justify-content-between space-between
justify-content-around space-around

Align Items

Align Items Utilities set the align-items property, use the format align-items-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-items-md-center).

Utility Value
align-items-start flex-start
align-items-center center
align-items-end flex-end
align-items-baseline baseline
align-items-stretch stretch

Align Content

Align Content Utilities set the align-content property, use the format align-content-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-content-md-center).

Utility Value
align-content-start flex-start
align-content-center center
align-content-end flex-end
align-content-between space-between
align-content-around space-around
align-content-stretch stretch

Align Self

Align Self Utilities set the align-self property, use the format align-self-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-self-md-center).

Utility Value
align-self-start flex-start
align-self-center center
align-self-end flex-end
align-self-auto auto
align-self-baseline baseline
align-self-stretch stretch

Fill

flex-fill sets flex: 1 1 auto !important. This forces a flex item to fill the remaining space, just becareful using this with long text that has no white space. Use the format flex-{sm|md|lg|xl}-fill to target specific screen sizes (e.g., flex-md-fill).

Utility Value
flex-fill flex: 1 1 auto

Grow

Flex Grow Utilities set the flex-grow property, use the format flex-{sm|md|lg|xl}-grow-{value} to target specific screen sizes (e.g., flex-md-grow-1).

Utility Value
flex-grow-0 0
flex-grow-1 1

Shrink

Flex Shrink Utilities set the flex-shrink property, use the format flex-{sm|md|lg|xl}-shrink-{value} to target specific screen sizes (e.g., flex-md-shrink-0).

Utility Value
flex-shrink-0 0
flex-shrink-1 1

Wrap

Flex Wrap Utilities set the flex-wrap property, use the format flex-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., flex-md-nowrap).

Utility Value
flex-nowrap nowrap
flex-wrap wrap
flex-wrap-reverse wrap-reverse

Order

Order Utilities set the order property, use the format order-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., order-md-5).

Utility Value
order-first -
order-last 13
order-0 0
order-1 1
order-2 2
order-3 3
order-4 4
order-5 5
order-6 6
order-7 7
order-8 8
order-9 9
order-10 10
order-11 11
order-12 12

How can this be improved? Create an issue!