Stretch children to fill horizontally
<div class="flex w-1/6 bg-sky-50 border border-sky-500 p-2">
<div class="flex grow p-2 border border-amber-500 bg-amber-50 mr-2">1</div>
<div class="flex grow p-2 border border-amber-500 bg-amber-50 mr-2">2</div>
<div class="flex grow p-2 border border-amber-500 bg-amber-50">3</div>
</div>
If you put several children's items in a flex container, each child will only take up as much space as it needs. This means that with a wide container, there is empty space in the container.
For example the following code:
<div class="flex w-1/6 bg-sky-50 border border-sky-500 p-2">
<div class="flex p-2 border border-amber-500 bg-amber-50 mr-2">1</div>
<div class="flex p-2 border border-amber-500 bg-amber-50 mr-2">2</div>
<div class="flex p-2 border border-amber-500 bg-amber-50">3</div>
</div>
will result in this output:
If you want the child items to completely fill the available space so each child item has the same width, use the flex-grow
property set to 1
. In TailwindCSS, use the grow
utility class to do this as you can see here:
<div class="flex w-1/6 bg-sky-50 border border-sky-500 p-2">
<div class="flex grow p-2 border border-amber-500 bg-amber-50 mr-2">1</div>
<div class="flex grow p-2 border border-amber-500 bg-amber-50 mr-2">2</div>
<div class="flex grow p-2 border border-amber-500 bg-amber-50">3</div>
</div>
And the result is:
Alternatively, you can use the w-full
class to set the width
property to 100%
for all elements. In this case, the child elements will have the same width even if one element has much more content.
<div class="flex w-1/6 bg-sky-50 border border-sky-500 p-2">
<div class="p-2 w-full border border-amber-500 bg-amber-50 mr-2">1</div>
<div class="p-2 w-full border border-amber-500 bg-amber-50 mr-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="p-2 w-full border border-amber-500 bg-amber-50">3</div>
</div>
In this case the result is:
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Create a 20/80 grid with Tailwind CSS
- Fill the full height of the screen in TailwindCSS
- Center an absolute element in TailwindCSS
- How to use calc() in TailwindCSS
- Force list bullets inside the container
- Write vertical text in HTML
- Center content within an element