tailwindcss 系列 Flex shirnk

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>