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 a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!
