Flexbox

Estimated reading: 1 minute 50 views

Tailwind uses Flexbox for the layout of items on the document. Flexbox is a css display property that de nes a ex container. Once a container has been assigned as a ex container, we can use all of the alignment utility classes to achieve the desired look.

				
					 .flex {} 
// Default direction - horizontal alignment
 .justify-start {}
 .justify-center {}
 .justify-end {}
 .justify-between {}
 .justify-around {} 
// Default direction - vertical alignment
 .items-stretch {}
 .items-start {}
 .items-center {}
 .items-end {}
 .items-baseline {}

				
					 // Flex Direction
 .flex-row {}
 .flex-row-reverse {}
 .flex-col {}
 .flex-col-reverse {}

				
					// Wrapping
 .flex-no-wrap {}
 .flex-wrap {}
 .flex-wrap-reverse {}