shirnk
start
效果
代码
<div class="flex bg-gray-200">
<div
class="flex-shirnk text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"
>
Longer content that cannot flex Longer content that cannot flex Longer
content that cannot flex Longer content that cannot flex Longer content
that cannot flex Longer content that cannot flex Longer content that
cannot flex Longer content that cannot flex Longer content that cannot
flex Longer content that cannot flex Longer content that cannot flex
</div>
<div
class="flex-shrink text-gray-800 text-center bg-gray-500 px-4 py-2 m-2"
>
Item that will shrink even if it causes the content to wrap Item that
will shrink even if it causes the content to wrap Item that will shrink
even if it causes the content to wrap Item that will shrink even if it
causes the content to wrap Item that will shrink even if it causes the
content to wrap Item that will shrink even if it causes the content to
wrap Item that will shrink even if it causes the content to wrap Item
that will shrink even if it causes the content to wrap
</div>
<div
class="flex-none text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"
>
Longer content that cannot flex Longer content that cannot flex Longer
content that cannot flex Longer content that cannot flex Longer content
</div>
</div>don't shirnk
效果
代码
<div class="flex bg-gray-200">
<div
class="flex-shrink text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"
>
Item that can shrink if needed Item that can shrink if needed Item that
can shrink if needed Item that can shrink if needed Item that can shrink
if needed Item that can shrink if needed can shrink if needed can shrink
if needed can shrink if needed can shrink if needed can shrink if needed
can shrink if needed can shrink if needed can shrink if needed can
shrink if needed Item that can shrink if needed Item that can shrink if
needed Item that can shrink if needed Item that can shrink if needed
Item that can shrink if needed Item that can shrink if needed can shrink
if needed can shrink if needed can shrink if needed can shrink if needed
can shrink if needed can shrink if needed can shrink if needed can
shrink if needed can shrink if needed
</div>
<div
class="flex-shrink-0 text-gray-800 text-center bg-gray-500 px-4 py-2 m-2"
>
Item that cannot shrink below its initial size Item that cannot shrink
</div>
<div
class="flex-shrink text-gray-700 text-center bg-gray-400 px-4 py-2 m-2"
>
Item that can shrink if needed Item that can shrink if needed Item that
can shrink if needed Item that can shrink if needed Item that can shrink
if needed Item that can shrink if needed Item that can shrink if needed
Item that can shrink if needed Item that can shrink if needed Item that
can shrink if needed Item that can shrink if needed Item that can shrink
if needed Item that can shrink if needed Item that can shrink if needed
Item that can shrink if needed Item that can shrink if needed Item that
can shrink if needed Item that can shrink if needed
</div>
</div>
