Starbucks React 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:

A Complete Guide to Flexbox - A thorough guide to every Flexbox property by CSS Tricks.
Solved by Flexbox - A collection of common UI patterns built with Flexbox.
Flexbox Froggy - A game that teaches Flexbox by positioning a variety of colorful frogs on lily pads.

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 }