Flex 增长、收缩与基准尺寸

By default, flex children are sized according to their content. But Flexbox provides three properties that give you fine control over how children fill available space: flex-grow controls how much extra space a child claims, flex-shrink controls how much it compresses when space is tight, and flex-basis sets the initial size before growing or shrinking. Tailwind exposes all three with concise utility classes.

flex-1 is the most commonly used flex sizing utility. It applies flex: 1 1 0% — grow to fill available space, shrink when necessary, and start from a zero basis. In practice, flex-1 makes each item claim an equal share of the remaining container space. Two flex-1 siblings each take 50%; three take 33% each.

flex-auto applies flex: 1 1 auto — it grows and shrinks but starts from the element's natural content size. Unlike flex-1 which starts from zero, flex-auto preserves the size difference between items before distributing extra space proportionally. Use it when you want content-aware distribution rather than equal splits.

flex-initial applies flex: 0 1 auto — the browser default. Items do not grow beyond their content size (grow: 0), but they will shrink if space is tight (shrink: 1). This is used to explicitly state the default in a context where sibling items use flex-1, keeping the initial item sized to its content while siblings take up remaining space.

flex-none applies flex: none — the item will neither grow to fill extra space nor shrink when space is limited. The item always remains exactly its natural content size. Use flex-none for icons, avatars, badges, and fixed-width elements that should maintain their size regardless of how much space is available in the flex container.

For fine-grained control, Tailwind provides separate grow, grow-0, shrink, and shrink-0 utilities. grow allows the item to grow (flex-grow: 1). grow-0 prevents growth. shrink allows shrinking (flex-shrink: 1). shrink-0 prevents shrinking — useful for preventing images and icons from being compressed when the container is too narrow.

basis-* sets the initial size of a flex item before growing or shrinking. It maps to CSS flex-basis. You can use Tailwind spacing values (basis-4 = 16px), percentage values (basis-1/2 = 50%), or keyword values (basis-full = 100%). Setting basis-1/3 on three siblings with grow creates a three-column layout that starts at equal thirds and fills available space.

basis-0 and basis-auto produce subtly different results when combined with grow. With basis-0, all items start at zero width and grow purely based on their flex-grow ratios — resulting in equal space allocation. With basis-auto, items first claim their content width, then extra space is distributed — resulting in content-proportional allocation.

A classic two-panel layout uses flex-none w-64 on the sidebar (fixed 256px width) and flex-1 on the main content area (takes everything else). This creates a sidebar that never grows or shrinks combined with a content area that fills 100% of remaining space. It is the foundation of dashboard and admin UI layouts.

Combining flex flex-wrap with flex-1 and a min-w-* constraint creates a responsive grid that automatically adjusts the number of columns based on available width. Each card takes at least min-w-64 width, and they expand to fill the row with flex-1. When a card cannot fit, it wraps to the next line — no explicit breakpoint management needed.

Tailwind's order-* utilities change the visual display order of flex items without changing their DOM order. order-first moves an item to the beginning, order-last moves it to the end, and order-1 through order-12 provide granular control. This is useful for responsive reordering: a sidebar that appears after content on mobile can be moved visually before it on desktop with md:order-first.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: flex-1 makes children claim equal shares of available space, flex-none prevents an item from growing or shrinking so it stays at its natural size, and grow, shrink, and basis-* provide granular control over each dimension separately. Next up we handle overflow with flex-wrap and create consistent gaps between flex items.