Flexbox & Grid
Flex
Utilities for controlling how flex items both grow and shrink.
Basic usage
Initial
Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:
01
02
03
<div className="flex">
<div className="flex-none w-14 h-14">01</div>
<div className="**flex-initial** w-64 ...">02</div>
<div className="**flex-initial** w-32 ...">03</div>
</div>
Flex 1
Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:
01
02
03
<div className="flex">
<div className="flex-none ...">01</div>
<div className="**flex-1** w-64 ...">02</div>
<div className="**flex-1** w-32 ...">03</div>
</div>
Auto
Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size:
01
02
03
<div className="flex ...">
<div className="flex-none ...">01</div>
<div className="**flex-auto** w-64 ...">02</div>
<div className="**flex-auto** w-32 ...">03</div>
</div>
None
Use flex-none to prevent a flex item from growing or shrinking:
01
02
03
<div className="flex ...">
<div className="flex-none w-14 h-14 ...">01</div>
<div className="**flex-none** ...">02</div>
<div className="flex-1 ...">03</div>
</div>