Tailwind CSS Flex Basis

Flex Basis is a property in Tailwind CSS that sets the initial size of a flex item before any available space is distributed among them.

Syntax

The syntax for using the flex-basis property in Tailwind CSS is as follows:

<div class="flex flex-col">
  <div class="flex-1 flex-basis-auto">Auto</div>
  <div class="flex-1 flex-basis-1/4">One Fourth</div>
  <div class="flex-1 flex-basis-2/4">One Half</div>
  <div class="flex-1 flex-basis-1/4">One Fourth</div>
</div>

Examples

Here are some examples of using flex-basis in Tailwind CSS:

<div class="flex flex-col">
  <div class="flex-1 flex-basis-auto">Auto</div>
  <div class="flex-1 flex-basis-1/4">One Fourth</div>
  <div class="flex-1 flex-basis-2/4">One Half</div>
  <div class="flex-1 flex-basis-1/4">One Fourth</div>
</div>

<div class="flex flex-col">
  <div class="flex-1 flex-basis-2/6">Two Sixths</div>
  <div class="flex-1 flex-basis-1/2">One Half</div>
  <div class="flex-1 flex-basis-1/3">One Third</div>
</div>

Output

The output of the above examples will be:

Explanation

The flex-basis property is used to set the initial size of a flex item. It is similar to the width property in CSS, but instead of setting a fixed size, it sets a flexible size that can change dynamically based on the available space.

The values for flex-basis are similar to the width property, and can be specified in pixels, percentages, or fractions.

Use

Use the flex-basis property to set the initial size of a flex item. This can be useful when you want to distribute available space among flex items in a certain ratio.

Important Points

• The flex-basis property is used to set the initial size of a flex item.
• The values for flex-basis can be specified in pixels, percentages, or fractions.
• flex-basis-auto sets the initial size of a flex item to its default size.
• flex-basis-1/2 sets the initial size of a flex item to half of the available space.
• Use flex-basis along with flex-grow and flex-shrink to create flexible layouts.

Summary

In summary, flex-basis is a property in Tailwind CSS that sets the initial size of a flex item before any available space is distributed among them. It is useful when you want to distribute available space among flex items in a certain ratio. Use it along with flex-grow and flex-shrink to create flexible layouts.