README
Flexbox
Flex utilities can be used to apply flexbox behaviors to elements.
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" />