flex-1: Tailwind CSS Flex class

The flex-1 class makes an element take up an equal share of the available space in a flex container.

Flex-1 (Flex Grow, Shrink, and Basis)

The flex-1 class makes an element take up an equal share of the available space in a flex container.

Example Code

html
<div class="flex p-10 bg-gray-100 space-x-5">
  <div class="flex-1 bg-red-400 p-4 text-center text-white font-bold rounded">Flex Item 1</div>
  <div class="flex-1 bg-blue-400 p-4 text-center text-white font-bold rounded">Flex Item 2</div>
</div>

Preview

Flex Item 1
Flex Item 2

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe