Tailwind CSS Testing Page

Flex Layouts

Item 1

Item 2

Item 3

Testing 4 - item item space item

Blue

Green

Purple

Testing 3.2 - Left, center , right

Relative without flex, require set parent size, items-center (v-center)

Left

Center: (absolute left-1/2 transform -translate-x-1/2)

Right: (ml-auto)

Blue

Purple

Blue

Green

Purple

Testing 3.1 - Left, center , right

Relative, items-center (v-center)

Left

Center: (absolute left-1/2 transform -translate-x-1/2)

Right: (ml-auto)

Blue

Purple

Blue

Green

Purple

Testing 2 - Left, right (justify-between)

Blue

Purple

Testing 1 - Widget

Blue

Green

Purple

Note

vertically center
items-center
flex-col justify-center

horizontally center
justify-center
flex-row items-center

Basic Flex Row

Item 1

Item 2

Item 3

Flex Column: flex-col

Item 1

Item 2

Item 3

Justify Content

justify-start

Item

justify-center

Item

justify-end

Item

justify-between

Item

Align Items

items-start

Short

Tall Item

Short

items-center

Short

Tall Item

Short

items-end

Short

Tall Item

Short

Mixed alignment: first two items-start, last item items-end

Short (self-start)

Tall Item (self-start)

Short (self-end)

Flex Wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7 (flex-1)

Item 8 (flex-2)

Flex Grow

flex-grow-0 (default)

Fixed Width

flex-grow-1 (grows to fill space)

Fixed Width

flex-grow (fills remaining space)

Fixed Width

Multiple flex-grow items (proportional growth)

flex-grow (1x)

Different flex-grow values

flex-grow (1x)

flex-grow-2 (2x)

flex-grow (1x)