How to use flex in tailwind?

@edmond_brakus 

To use the flex utility classes in Tailwind CSS, you can add them directly to your HTML elements. Here's an example of how you can use the flex classes:

1. flex - This class will make the element a flex container.

1
2
3

<div class="flex">
  <!-- Flex container content -->
</div>

1. flex-row - This class will make the flex container display its children in a row.

1
2
3

<div class="flex flex-row">
  <!-- Flex items display in a row -->
</div>

1. flex-col - This class will make the flex container display its children in a column.

1
2
3

<div class="flex flex-col">
  <!-- Flex items display in a column -->
</div>

1. flex-1, flex-2, flex-3, etc. - These classes will set the flex grow property to a specific value.

1
2
3
4
5

<div class="flex">
  <div class="flex-1">Flex Item 1</div>
  <div class="flex-2">Flex Item 2</div>
  <div class="flex-1">Flex Item 3</div>
</div>

These are just a few examples of how you can use the flex utility classes in Tailwind CSS. You can combine these classes with other utility classes to create more complex layout designs.