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 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>
<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 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-shrink
properties, 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>
<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 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>
<div class="flex flex-col h-48">
<div class="h-16">Flex Item One</div>
<div class="flex-1">Flex Item Two</div>
</div>