Flex Properties in TailwindCSS

- Move your mouse over the property lines and click to copy -

Properties for the flex container

Direction
This establishes the main-axis.
1
2
3
  • Tailwind Class
    CSS Property
  • flex-row
    flex-direction: row
  • flex-row-reverse
    flex-direction: row-reverse
  • flex-col
    flex-direction: column
  • flex-col-reverse
    flex-direction: column-reverse
Wrap
By default, flex items will all try to fit onto one line. You can change that.
1
2
3
  • Tailwind Class
    CSS Property
  • flex-wrap
    flex-wrap: wrap;
  • flex-wrap-reverse
    flex-wrap: wrap-reverse;
  • flex-nowrap
    flex-wrap: nowrap;
Justify Content
This defines the alignment along the main axis.
1
2
3
  • Tailwind Class
    CSS Property
  • justify-start
    justify-content: flex-start
  • justify-end
    justify-content: flex-end
  • justify-center
    justify-content: center
  • justify-between
    justify-content: space-between
  • justify-around
    justify-content: space-around
  • justify-evenly
    justify-content: space-evenly
Align Items
This defines the default behavior for how flex items are laid out along the cross axis on the current line.
1
2
3
  • Tailwind Class
    CSS Property
  • items-stretch
    align-items: stretch
  • items-start
    align-items: flex-start
  • items-end
    align-items: flex-end
  • items-center
    align-items: center
  • items-baseline
    align-items: baseline
Align Content
This aligns a flex container’s lines within when there is extra space in the cross-axis.
1
2
3
4
5
6
7
8
  • Tailwind Class
    CSS Property
  • content-center
    align-content: center
  • content-start
    align-content: flex-start
  • content-end
    align-content: flex-end
  • content-between
    align-content: space-between
  • content-around
    align-content: space-around
  • content-evenly
    align-content: space-evenly

Properties for the flex children

Order
By default, flex items are laid out in the source order.
1
2
3
4
5
  • Tailwind Class
    CSS Property
  • order-1
    order: 1
  • order-2
    order: 2
  • order-3 (until 12)
    order: 3
  • -order-1
    order: -1
  • -order-2
    order: -2
  • -order-3 (until 12)
    order: -3
  • order-first
    order: -9999
  • order-last
    order: 9999
Grow
This defines the ability for a flex item to grow if necessary.
1
2
3
4
5
  • Tailwind Class
    CSS Property
  • grow
    flex-grow: 1;
  • grow-0
    flex-grow: 0;
Shrink
This defines the ability for a flex item to shrink if necessary.
1
2
3
4
5
  • Tailwind Class
    CSS Property
  • shrink
    flex-shrink: 1;
  • shrink-0
    flex-shrink: 0;
Inspired by an article from CSS-TRICKS.