Flexbox with TailwindCSS utility classes

FlexBox system: please note that I call the flex line as flex virtual container

Tailwind Class	CSS declaration	Edit
flex	display: flex;	Example

Explanation: flex sets the display property of an element to flex and it makes a flex container.

Tailwind Class	CSS declaration	Edit
justify-normal	justify-content: normal;	Example
justify-start	justify-content: flex-start;	Example
justify-end	justify-content: flex-end;	Example
justify-center	justify-content: center;	Example
justify-between	justify-content: space-between;	Example
justify-around	justify-content: space-around;	Example
justify-evenly	justify-content: space-evenly;	Example
justify-stretch	justify-content: stretch;	Example

Explanation: The flex items in a way are positioned along the main axis within the flex virtual container.

Tailwind Class	CSS declaration	Edit
items-start	align-items: flex-start;	Example
items-end	align-items: flex-end;	Example
items-center	align-items: center;	Example
items-baseline	align-items: baseline;	Example
items-stretch	align-items: stretch;	Example

Explanation: The flex items in a way are positioned along the cross axis within the virtual flex container.

Tailwind Class	CSS declaration	Edit
content-normal	align-content: normal;	Example
content-center	align-content: center;	Example
content-start	align-content: flex-start;	Example
content-end	align-content: flex-end;	Example
content-between	align-content: space-between;	Example
content-around	align-content: space-around;	Example
content-evenly	align-content: space-evenly;	Example
content-baseline	align-content: baseline;	Example
content-stretch	align-content: stretch;	Example

Explanation: The virtual flex containers in a way are positioned along the cross axis within the flex container.

The align-content: normal; value is actually the default value of the align-content property in the CSS Box Alignment specification, but it behaves differently depending on the layout model. For Flexbox, this value is treated as stretch, which means the flex lines will stretch to take up any remaining space in the flex container along the cross-axis.