Tailwind & Flexbox

Some examples showing tailwind flexbox based layouts.

Unstyled

This is just a set of boxes, with some outlines and padding so you can see what's going on.

<div>
  <div>Flex Item One</div>
  <div>Flex Item Two</div>
  <div>Flex Item Three</div>
</div>
Flex Item One
Flex Item Two
Flex Item Three

Flex Example

Simply adding .flex property to the flex-container turns the layout into a flexbox.

The default flex-direction is row (flex-row), so the flex-items are automatically arranged in horizontal columns. You can use the flex-col property (equivalent of flex-direction: row;) switches the flex axis so that that items are arranged vertically.

The items width and height dimensions are calculated based on the contents.

<div class="flex">
  <div>Flex Item One</div>
  <div>Flex Item Two with some extra text</div>
  <div>Flex Item Three</div>
</div>
Flex Item One
Flex Item Two with some extra text
Flex Item Three
<div class="flex flex-col h-48">
  <div>Flex Item One</div>
  <div>Flex Item Two with some extra text</div>
  <div>Flex Item Three</div>
</div>
Flex Item One
Flex Item Two with some extra text
Flex Item Three

Flex Grow & Shrink - Equal Sizes

Sometimes want the flex-items expand/shrink depending on the available space, rather than based on the contents. For example, if you need three equal width columns. In Tailwind we can add the flex-grow or flex-shrinkproperties, or the .flex-1 shorthand, which is eqivalent of flex: 1 1 0%.

Apply these equally to each flex-item to get them all the same size.

<div class="flex">
  <div class="flex-1">Flex Item One</div>
  <div class="flex-1">Flex Item Two with some extra text</div>
  <div class="flex-1">Flex Item Three</div>
</div>
Flex Item One
Flex Item Two with some extra text
Flex Item Three
<div class="flex flex-col h-48">
  <div class="flex-1">Flex Item One</div>
  <div class="flex-1">Flex Item Two with some extra text</div>
  <div class="flex-1">Flex Item Three</div>
</div>
Flex Item One
Flex Item Two with some extra text
Flex Item Three

Flex Grow & Shrink - Relative Sizes

This is a bit more difficult in tailwind. With flex you can set flex-grow to 1 on one column and 2 on a different column, so that the second column takes up twice as much space. Tailwind doesn't have that flexibility out of the box.

But you can play about with combinations of widths and grow/shrink settings to get similar effects.

<div class="flex">
  <div class="w-1/3">Flex Item One</div>
  <div class="flex-1">Flex Item Two</div>
</div>
Flex Item One
Flex Item Two
<div class="flex flex-col h-48">
  <div class="h-16">Flex Item One</div>
  <div class="flex-1">Flex Item Two</div>
</div>
Flex Item One
Flex Item Two