Flex container properties
Centering
How to center an element in a flex container.
CSS
align-items: center; justify-content: center
Tailwind class
items-center justify-center
CSS
place-content: center center; flex-wrap: wrap
Tailwind class
place-content-center flex-wrap
display
Sets the containing element to be a block or inline flex container.
CSS
display: flex
Tailwind class
flex
CSS
display: inline-flex
Tailwind class
inline-flex
flex-direction
Sets the direction of the elements inside the flex container.
CSS
flex-direction: row
Tailwind class
flex-row
CSS
flex-direction: row-reverse
Tailwind class
flex-row-reverse
CSS
flex-direction: column
Tailwind class
flex-col
CSS
flex-direction: column-reverse
Tailwind class
flex-col-reverse
flex-wrap
Controls how elements that don't fit in the main axis are wrapped.
CSS
flex-wrap: nowrap
Tailwind class
flex-nowrap
CSS
flex-wrap: wrap
Tailwind class
flex-wrap
CSS
flex-wrap: wrap-reverse
Tailwind class
flex-wrap-reverse
justify-content
Specify how extra space is distributed on the main axis.
CSS
justify-content: flex-start
Tailwind class
justify-start
CSS
justify-content: flex-end
Tailwind class
justify-end
CSS
justify-content: center
Tailwind class
justify-center
CSS
justify-content: space-between
Tailwind class
justify-between
CSS
justify-content: space-around
Tailwind class
justify-around
CSS
justify-content: space-evenly
Tailwind class
justify-evenly
align-items
Specify how items are placed on the cross axis.
CSS
align-items: flex-start
Tailwind class
items-start
CSS
align-items: center
Tailwind class
items-center
CSS
align-items: flex-end
Tailwind class
items-end
CSS
align-items: baseline
Tailwind class
items-baseline
CSS
align-items: stretch
Tailwind class
items-stretch
align-content
If there are multiple lines of content on the cross axis, controls how extra cross axis space is used.
CSS
align-content: normal
Tailwind class
content-normal
CSS
align-content: flex-start
Tailwind class
content-start
CSS
align-content: center
Tailwind class
content-center
CSS
align-content: flex-end
Tailwind class
content-end
CSS
align-content: baseline
Tailwind class
content-baseline
CSS
align-content: space-between
Tailwind class
content-between
CSS
align-content: space-around
Tailwind class
content-around
CSS
align-content: space-evenly
Tailwind class
content-evenly
CSS
align-content: stretch
Tailwind class
content-stretch
gap
Add a fixed-size gutter of empty space between elements in the flex container.
CSS
gap: 4px
Tailwind class
gap-1
CSS
row-gap: 4px
Tailwind class
gap-y-1
CSS
column-gap: 4px
Tailwind class
gap-x-1
Children properties
order
Specify the order of child elements.
CSS
order: N
Tailwind class
order-N
CSS
order: -N
Tailwind class
-order-N
flex-grow
Control how each child grows to fill the available space.
CSS
flex-grow: 1
Tailwind class
grow
CSS
flex-grow: N
Tailwind class
grow-[N]
flex-basis
Specify the preferred size of an element along the main axis.
CSS
flex-basis: (size)
Tailwind class
basis-[N]
CSS
flex-basis: 33.333%
Tailwind class
basis-1/3 flex-wrap
flex-shrink
Set the rate at which an element shrinks. Both want to be 100% width, first has shrink-[2].
CSS
flex-shrink: N
Tailwind class
shrink-[N]