CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Flex

Use shorthand flex utility classes to manage the layout, alignment, and size of Chi components.

Display#

To enable flex, apply a flex display utility class. This will transform your element into a flexbox container and its direct children into flex items.

Target specific breakpoints with Display responsive classes.

  • -d--flex
  • -d--inline-flex
  • -d-sm--flex
  • -d-sm--inline-flex
  • -d-md--flex
  • -d-md--inline-flex
  • -d-lg--flex
  • -d-lg--inline-flex
  • -d-xl--flex
  • -d-xl--inline-flex

Direction#

Use direction utilities to define how items will be placed in flex containers.

Target specific breakpoints with Direction responsive classes.

  • -flex--row
  • -flex--row-reverse
  • -flex--column
  • -flex--column-reverse
  • -flex-sm--row
  • -flex-sm--row-reverse
  • -flex-sm--column
  • -flex-sm--column-reverse
  • -flex-md--row
  • -flex-md--row-reverse
  • -flex-md--column
  • -flex-md--column-reverse
  • -flex-lg--row
  • -flex-lg--row-reverse
  • -flex-lg--column
  • -flex-lg--column-reverse
  • -flex-xl--row
  • -flex-xl--row-reverse
  • -flex-xl--column
  • -flex-xl--column-reverse

Target specific breakpoints with Justify content responsive classes.

  • -justify-content--start
  • -justify-content--end
  • -justify-content--center
  • -justify-content--between
  • -justify-content--around
  • -justify-content-sm--start
  • -justify-content-sm--end
  • -justify-content-sm--center
  • -justify-content-sm--between
  • -justify-content-sm--around
  • -justify-content-md--start
  • -justify-content-md--end
  • -justify-content-md--center
  • -justify-content-md--between
  • -justify-content-md--around
  • -justify-content-lg--start
  • -justify-content-lg--end
  • -justify-content-lg--center
  • -justify-content-lg--between
  • -justify-content-lg--around
  • -justify-content-xl--start
  • -justify-content-xl--end
  • -justify-content-xl--center
  • -justify-content-xl--between
  • -justify-content-xl--around

Target specific breakpoints with Align Items responsive classes.

  • -align-items--start
  • -align-items--end
  • -align-items--center
  • -align-items--baseline
  • -align-items--stretch
  • -align-items-sm--start
  • -align-items-sm--end
  • -align-items-sm--center
  • -align-items-sm--baseline
  • -align-items-sm--stretch
  • -align-items-md--start
  • -align-items-md--end
  • -align-items-md--center
  • -align-items-md--baseline
  • -align-items-md--stretch
  • -align-items-lg--start
  • -align-items-lg--end
  • -align-items-lg--center
  • -align-items-lg--baseline
  • -align-items-lg--stretch
  • -align-items-xl--start
  • -align-items-xl--end
  • -align-items-xl--center
  • -align-items-xl--baseline
  • -align-items-xl--stretch

Align self#

Use align-self utilities to alter the alignment of individual flex items on the cross axis.

Target specific breakpoints with Align self responsive classes.

  • -align-self--start
  • -align-self--end
  • -align-self--center
  • -align-self--baseline
  • -align-self--stretch
  • -align-self-sm--start
  • -align-self-sm--end
  • -align-self-sm--center
  • -align-self-sm--baseline
  • -align-self-sm--stretch
  • -align-self-md--start
  • -align-self-md--end
  • -align-self-md--center
  • -align-self-md--baseline
  • -align-self-md--stretch
  • -align-self-lg--start
  • -align-self-lg--end
  • -align-self-lg--center
  • -align-self-lg--baseline
  • -align-self-lg--stretch
  • -align-self-xl--start
  • -align-self-xl--end
  • -align-self-xl--center
  • -align-self-xl--baseline
  • -align-self-xl--stretch

Wrap#

Use wrap utilities to define how flex items wrap in a flex container.

Target specific breakpoints with Wrap responsive classes.

  • -flex--nowrap
  • -flex--wrap
  • -flex--wrap-reverse
  • -flex-sm--nowrap
  • -flex-sm--wrap
  • -flex-sm--wrap-reverse
  • -flex-md--nowrap
  • -flex-md--wrap
  • -flex-md--wrap-reverse
  • -flex-lg--nowrap
  • -flex-lg--wrap
  • -flex-lg--wrap-reverse
  • -flex-xl--nowrap
  • -flex-xl--wrap
  • -flex-xl--wrap-reverse

Align content#

Use align-content utilities on flexbox containers to alter the alignment of flex items together on the cross axis.

Target specific breakpoints with Align content responsive classes.

  • -align-content--start
  • -align-content--end
  • -align-content--center
  • -align-content--around
  • -align-content--between
  • -align-content--stretch
  • -align-content-sm--start
  • -align-content-sm--end
  • -align-content-sm--center
  • -align-content-sm--around
  • -align-content-sm--between
  • -align-content-sm--stretch
  • -align-content-md--start
  • -align-content-md--end
  • -align-content-md--center
  • -align-content-md--around
  • -align-content-md--between
  • -align-content-md--stretch
  • -align-content-lg--start
  • -align-content-lg--end
  • -align-content-lg--center
  • -align-content-lg--around
  • -align-content-lg--between
  • -align-content-lg--stretch
  • -align-content-xl--start
  • -align-content-xl--end
  • -align-content-xl--center
  • -align-content-xl--around
  • -align-content-xl--between
  • -align-content-xl--stretch

Target specific breakpoints with Fill responsive classes.

  • -flex--fill
  • -flex-sm--fill
  • -flex-md--fill
  • -flex-lg--fill
  • -flex-xl--fill

Target specific breakpoints with Grow responsive classes.

  • -flex--grow0
  • -flex--grow1
  • -flex-sm--grow0
  • -flex-sm--grow1
  • -flex-md--grow0
  • -flex-md--grow1
  • -flex-lg--grow0
  • -flex-lg--grow1
  • -flex-xl--grow0
  • -flex-xl--grow1

Target specific breakpoints with Shrink responsive classes.

  • -flex--shrink0
  • -flex--shrink1
  • -flex-sm--shrink0
  • -flex-sm--shrink1
  • -flex-md--shrink0
  • -flex-md--shrink1
  • -flex-lg--shrink0
  • -flex-lg--shrink1
  • -flex-xl--shrink0
  • -flex-xl--shrink1

Basis#

Use the -flex--basis* class to specify the initial size of the flex item, before any available space is distributed according to the flex factors.

Flex-basis utility classes can be defined using the format -flex-basis-{breakpoint}--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints#

Flex-basis utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints#

To target a specific breakpoint, add the breakpoint abbreviation to the class.