flex-shrink
flex-shrink(...)Description
Documentation for flex-shrink.
Real-World Examples
Practical code examples showing how flex-shrink is used in real projects.
.ai-categories-scroll::-webkit-scrollbar {
display: none;
}
.ai-category-chip {
flex-shrink: 0;
background: var(--ai-bg-command);
border: 1px solid var(--ai-border);
border-radius: var(--ai-radius-xl);
padding: var(--ai-spacing-sm) var(--ai-spacing-md);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: var(--ai-transition-fast);
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--ai-spacing-xs);
min-height: 36px;
}
.ai-category-chip.active {
background: var(--ai-primary);
border-color: var(--ai-primary);
color: white;
<div className="bg-white rounded-lg border border-gray-200 p-8 mb-8">
<h3 className="text-lg font-bold text-center mb-8">TOP 3 순위</h3>
<div className="flex justify-center items-end gap-6 sm:gap-10 mb-8">
{/* 2위 */}
{leaderboardData[1] && (
<div className="text-center flex-shrink-0 w-24 sm:w-28">
<div className="w-16 h-16 sm:w-20 sm:h-20 bg-gray-100 rounded-ful...
<span className="text-xl sm:text-2xl">🥈</span>
</div>
<div className="font-semibold text-base sm:text-lg mb-2" title={l...
<div className="text-xs sm:text-sm text-gray-500 mb-3">
{timePeriod === 'today' ? '오늘' : timePeriod === 'week' ? '이번 ...
</div>
<div className="w-20 h-20 sm:w-24 sm:h-24 bg-gray-300 rounded-t-l...
</div>
)}
{/* 1위 */}
{leaderboardData[0] && (
<div className="text-center flex-shrink-0 w-28 sm:w-32">
<div className="w-20 h-20 sm:w-24 sm:h-24 bg-yellow-100 rounded-f...
<span className="text-2xl sm:text-3xl">🥇</span>
</div>
<div className="font-bold text-lg sm:text-xl mb-2" title={leaderb...
<div className="text-sm sm:text-base text-gray-600 mb-3">