Flexs

Utilities to control the flex of the elements

Basics

Class	Properties
flex	display: flex;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;
flex-1	flex: 1;
flex-auto	flex: auto;
flex-initial	flex: initial;
flex-none	flex: none;;
flex-grow-0	flex-grow: 0;
flex-grow	flex-grow: 1;
flex-shrink-0	flex-shrink: 0;
flex-shrink	flex-shrink: 1;

Align items

Class	Properties
items-center	align-items: center
items-start	align-items: start
items-end	align-items: end
items-baseline	align-items: baseline
items-stretch	align-items: stretch

Align self

Class	Properties
self-end	align-self: end
self-center	align-self: center
self-baseline	align-self: baseline
self-stretch	align-self: stretch

Justify content

Class	Properties
justify-start	justify-content: start
justify-end	justify-content: end
justify-between	justify-content: between
justify-around	justify-content: around
justify-evenly	justify-content: evenly
justify-center	justify-content: center

Gap

Class	Properties
gap-xs	gap: var(--dash-size-xs);
gap-sm	gap: var(--dash-size-sm);
gap-md	gap: var(--dash-size-md);
gap-lg	gap: var(--dash-size-lg);
gap-xl	gap: var(--dash-size-xl);
gap-2xl	gap: var(--dash-size-2xl);
gap-3xl	gap: var(--dash-size-3xl);
gap-4xl	gap: var(--dash-size-4xl);
gap-5xl	gap: var(--dash-size-5xl);
gap-6xl	gap: var(--dash-size-6xl);
gap-7xl	gap: var(--dash-size-7xl);
gap-8xl	gap: var(--dash-size-8xl);
gap-9xl	gap: var(--dash-size-9xl);
gap-full	gap: var(--dash-size-full);
gap-screen	gap: var(--dash-size-screen);