README

Flexbox

Flex utilities can be used to apply flexbox behaviors to elements.

Classes
Installation

Classes

Flex container

Use these classes to make an element layout its content using the flexbox model.

.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}

Flex direction

Defines how flexbox items are ordered within a flexbox container.

.flex-column {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}

Flex wrap

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

Flex justify-content

Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}

Flex align-items

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-baseline {
  align-self: baseline;
}
.self-stretch {
  align-self: stretch;
}

Flex align-content

Defines how each line is aligned within a flexbox/grid container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox/grid items.

.content-start {
  align-content: flex-start;
}
.content-end {
  align-content: flex-end;
}
.content-center {
  align-content: center;
}
.content-between {
  align-content: space-between;
}
.content-around {
  align-content: space-around;
}
.content-stretch {
  align-content: stretch;
}

Flex align-self

Works like align-items, but applies only to a single flexbox item, instead of all of them.

.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-baseline {
  align-self: baseline;
}
.self-stretch {
  align-self: stretch;
}

Flex grow & shrink

Defines how much a flexbox item should grow if there's space available. Defines how much a flexbox item should shrink if there's not enough space available.

.flex-grow-0 {
  flex-grow: 0;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.flex-shrink-1 {
  flex-shrink: 1;
}

Responsive flexbox classes

To apply specific classes at set screen widths, use the following classes:

Abbr	Value
`ns`	`$breakpoint-ns` (min-width: 48rem)
`m`	`$breakpoint-m` (min-width: 48rem, max-width: 64rem)
`l`	`$breakpoint-l` (min-width: 64rem)

Installation

$ npm install @citizensadvice/flexbox

now import into your stylesheet....

@import '@citizensadvice/flexbox/index.scss';

You can make use of the unpkg service, try adding the link below to the head of your HTML file.

<link src="https://unpkg.com/@citizensadvice/flexbox@latest/build/flexbox.css" />

Usage no npm install needed!