HomeStarbucks Pattern Library

Introduction

Our Flexbox presentational classes make common flex layouts easy without requiring additional CSS. To learn more about Flexbox, check out the following resources:

Flex

A presentational class to set display: flex on an element.

.flex

Media Queries

Use breakpoint prefixes to apply flex at our standard breakpoints:

.sm-flex
.md-flex
.lg-flex
.xl-flex
.xxl-flex

Direction

To set a flex container's direction to column instead of row, add the flex-column class.

Wrap

To allow a flex container's children to wrap, add the flex-wrap class to the container.

To allow a flex container's children to wrap in reverse, based on the main-axis, add the flex-wrap-reverse class to the container.

Align Items

A group of presentational classes for setting align-items values. Apply these classes to a flex container to control the alignment of children along the flex container's secondary axis.
.items-start
Latte
.items-end
Latte
.items-center
Latte
.items-baseline
Latte
.items-stretch
Latte

Align Self

A group of presentational classes for setting align-self values. Apply these classes to a flex item to override the container's align-itemsrule on an individual flex item.
.self-start
Latte
.self-end
Latte
.self-center
Latte
.self-baseline
Latte
.self-stretch
Latte

Justify Content

A group of presentational classes for setting justify-content values. Apply these classes to a flex container to control the justification of children along the flex container's primary axis.
.justify-start
Latte
.justify-end
Latte
.justify-center
Latte
.justify-between
Latte
.justify-around
Latte

Align Content

A group of presentational classes for setting align-content values. Apply these classes to a flex container to control the justification of children along the flex container's secondary axis.
.content-start
Latte
Mocha
Cappuccino
.content-end
Latte
Mocha
Cappuccino
.content-center
Latte
Mocha
Cappuccino
.content-between
Latte
Mocha
Cappuccino
.content-around
Latte
Mocha
Cappuccino
.content-stretch
Latte
Mocha
Cappuccino

Flex Items

Several presentational classes are available to set common flex-grow, flex-shrink, and flex-basis values.

.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important }

.flex-shrink { flex-shrink: 1 !important }
.flex-shrink-none { flex-shrink: 0 !important }
.flex-grow { flex-grow: 1 !important }
.flex-grow-none { flex-grow: 0 !important }

.flex-basis-none { flex-basis: 0% !important }

Order

Several presentational classes are available to set common order values:

.order-0 { order: 0 !important }
.order-1 { order: 1 !important }
.order-2 { order: 2 !important }
.order-3 { order: 3 !important }
.order-last { order: 99999 !important }
.order-first { order: -1 !important }