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]