Tailwind FlexBox

Tailwind FlexBox

Flex Direction

Snippet	Purpose
`flex-row`	flex-direction: row;
`flex-row-reverse`	flex-direction: row-reverse;
`flex-col`	flex-direction: column;
`flex-col-reverse`	flex-direction: column-reverse;

Flex Wrap

Snippet	Purpose
`flex-no-wrap`	flex-wrap: nowrap;
`flex-wrap`	flex-wrap: wrap;
`flex-wrap-reverse`	flex-wrap: wrap-reverse;

Align Items

Snippet	Purpose
`items-stretch`	align-items: stretch;
`items-start`	align-items: flex-start;
`items-center`	align-items: center;
`items-end`	align-items: flex-end;
`items-baseline`	align-items: baseline;

Align Content

Snippet	Purpose
`content-start`	align-content: flex-start;
`content-center`	align-content: center;
`content-end`	align-content: flex-end;
`content-between`	align-content: space-between;
`content-around`	align-content: space-around;

Align Self

Snippet	Purpose
`self-auto`	align-self: auto;
`self-start`	align-self: flex-start;
`self-center`	align-self: center;
`self-end`	align-self: flex-end;
`self-stretch`	align-self: stretch;

Justify Content

Snippet	Purpose
`justify-start`	justify-content: flex-start;
`justify-center`	justify-content: center;
`justify-end`	justify-content: flex-end;
`justify-between`	justify-content: space-between;
`justify-around`	justify-content: space-around;

Flex

Snippet	Purpose
`flex-initial`	flex: 0 1 auto;
`flex-1`	flex: 1 1 0%;
`flex-auto`	flex: 1 1 auto;
`flex-none`	flex: none;

Flex Grow

Snippet	Purpose
`flex-grow`	flex-grow: 1;
`flex-grow-0`	flex-grow: 0;

Flex Shrink

Snippet	Purpose
`flex-shrink`	flex-shrink: 1;
`flex-shrink-0`	flex-shrink: 0;

Flex Order

Snippet	Purpose
`order-first`	order: -9999;
`order-last`	order: 9999;
`order-none`	order: 0;
`order-1`	order: 1;
`order-2`	order: 2;
`order-3`	order: 3;
`order-4`	order: 4;
`order-5`	order: 5;
`order-6`	order: 6;
`order-7`	order: 7;
`order-8`	order: 8;
`order-9`	order: 9;
`order-10`	order: 10;
`order-11`	order: 11;
`order-12`	order: 12;