Tailwind flex

The flex utility in Tailwind CSS is a shorthand for setting the flex-grow, flex-shrink, and flex-basis properties in one go. It controls how a flex item expands, shrinks, or sets its initial size inside a flex container. With a range of options and flexibility, you can achieve different flexbox configurations and create dynamic designs.

Enabling Tailwind Flex Container

To enable tailwind flex behavior on an element, you can use the flex utility class. By default, the flex class makes an element a flex container and arranges its children in a single row. Here's an example:

Tailwind flex initial

By default, flex items have an initial value of flex-grow: 0and flex-shrink: 1, which means they can grow to fill the available space and can shrink to prevent overflow. The flex-initial class can be used to override these default values.

How to apply Tailwind Flex-initial Behavior

To apply the tailwind flex-initial behavior of a flex item, you can use the flex-initial class. Applying this class to a flex item will make it start with its initial size, preventing it from growing or shrinking. Here's an example: To apply the tailwind flex-initial behavior of a flex item, you can use the flex-initial class. Applying this class to a flex item will make it start with its initial size, preventing it from growing or shrinking. Here's an example:

<div class="flex">
	<div class=" flex-initial">short</div>
	<div class=" flex-initial">flex initial</div>
	<div class=" flex-initial">it grows when the item is large</div>
</div>

Preview

Tailwind Flex-1

It sets the flex-grow property to 1, allowing the flex item to grow and fill the remaining space in the flex container.

Setting Tailwind Flex-1 Behavior

To apply the tailwind flex-1 behavior to a flex item, you can use the flex-1 class. This class ensures that the flex item grows and occupies all the available space within the flex container. Here's an example:

<div class="flex">
	<div class="flex">
		<div class=" flex-1...">short</div>
		<div class=" flex-1...">flex initial</div>
		<div class=" flex-1...">it grows when the item is large</div>
	</div>
</div>

Preview

Tailwind Flex-Auto

It sets the flex-grow, flex-shrink, and flex-basis properties to ensure that the flex item grows and shrinks based on its content.

How to apply Tailwind Flex-auto Behavior

To apply the tailwind flex auto behavior to a flex item, you can use the flex-auto class. This class ensures that the flex item adjusts its size based on its content and the available space in the flex container. Here's an example:

<div class="flex">
	<div class=" flex-auto....">short</div>
	<div class=" flex-auto...">flex initial</div>
	<div class=" flex-auto...">it grows when the item is large</div>
</div>

Preview

Tailwind Flex-None

It sets the flex-grow and flex-shrink properties to 0, effectively fixing the size of the flex item.

How to apply Tailwind Flex-None Behavior

To apply the tailwind flex-none behavior to a flex item, you can use the flex-none class. This class ensures that the flex item maintains its initial size and does not grow or shrink. Here's an example:

<div class="flex">
	<div class=" flex-none....">short</div>
	<div class=" flex-none...">flex initial</div>
	<div class=" flex-none...">it grows when the item is large</div>
</div>

Preview

That's it! You now have a solid understanding of how to use the flex utility classes in Tailwind CSS to create flexible and responsive layouts using CSS flexbox.

Responsive Behavior

You can change flex behavior at different breakpoints:

<div class="flex gap-4">
	<div class="flex-1 sm:flex-none lg:flex-auto bg-green-200">
		Changes flex rules by screen size
	</div>
</div>

Preview

Interaction State Use (hover/focus)

You can dynamically adjust flex behavior on interaction:

<div class="flex">
	<div class="flex-1 hover:flex-auto bg-yellow-300">
		Hover to allow growth based on content
	</div>
</div>

Arbitrary Value Usage

You can define custom grow/shrink/basis combinations using arbitrary values:

<div class="flex gap-4">
	<div class="flex-[2_1_200px] bg-purple-300">
		Grow twice as much, shrink normally, 200px basis
	</div>
	<div class="flex-[1_0_auto] bg-purple-500 text-white">
		Grow normally, no shrink, auto basis
	</div>
</div>

Preview

Customization in tailwind.config.js

You can extend or override flex values:

module.exports = {
	theme: {
		extend: {
			flex: {
				2: "2 2 0%",
				3: "3 3 0%",
			},
		},
	},
};

Now you can use flex-2 and flex-3 in your HTML.

Real UI Component Example — Responsive Pricing Table

<div class="flex flex-wrap gap-6">
	<div class="flex-1 min-w-[250px] bg-white shadow-md p-6 rounded-lg">
		<h2 class="text-lg font-semibold">Basic</h2>
		<p class="mt-2">$19/month</p>
	</div>
	<div
		class="flex-[2_1_300px] min-w-[300px] bg-blue-500 text-white shadow-lg p-6 rounded-lg"
	>
		<h2 class="text-lg font-semibold">Pro</h2>
		<p class="mt-2">$49/month</p>
	</div>
	<div class="flex-1 min-w-[250px] bg-white shadow-md p-6 rounded-lg">
		<h2 class="text-lg font-semibold">Enterprise</h2>
		<p class="mt-2">Custom pricing</p>
	</div>
</div>

Preview

Best Practices for Devs/Designers

• Use flex-1 for equal-width elements that adapt naturally.

• Use flex-none for fixed-size UI elements like buttons, icons, or ads.

• Use arbitrary values for fine-grained control instead of excessive nesting.

• Combine with min-w-_ or max-w-_ for predictable layouts.

Tailwind Flex Class Table

✨ What's Next?

• Tailwind css flex direction

• Tailwind Gap

Windframe Tailwind blocks

footer