Flex Sizing

on

🔹 How Flexbox Items Get Their Size



Inside a flex container, each child is called a flex item. But how does the final width/height of each item get determined? Flexbox follows a specific algorithm with a priority list.

🔹 Priority List (Order of Rules)

  1. min-width / max-width
    If these are set, they always take top priority.

  2. flex-basis
    Defines the initial size of the flex item along the main axis.
    👉 In a row it controls width, in a column it controls height.

  3. width / height
    If no flex-basis is set, then width (for row) or height (for column) applies.

  4. Content size
    If nothing is set, the item’s content decides its size.
    Example: a long word forces a minimum width.

🔹 What is Flex-Grow?

👉 Controls how much an item can grow when the container has extra space.

  • flex-grow: 0 → item will not grow (default).

  • flex-grow: 1 → item takes an equal share of leftover space.

  • If one item has flex-grow: 2 and another has flex-grow: 1, the first one takes twice as much space.

📌 Example:
3 boxes inside a 400px container.

  • Box 1 → flex-grow: 1

  • Box 2 → flex-grow: 2

  • Box 3 → flex-grow: 1

Distribution:

  • Box 1 = base size + 1 share of extra space

  • Box 2 = base size + 2 shares of extra space

  • Box 3 = base size + 1 share of extra space

👉 Result: Box 2 will always appear larger.

🔹 What is Flex-Shrink?

👉 Controls how much an item can shrink when the container gets smaller.

  • flex-shrink: 0 → will not shrink (stays at min-width).

  • flex-shrink: 1 → shrinks proportionally (default).

  • If one item has flex-shrink: 3 and another has flex-shrink: 1, the first will shrink 3 times faster.

📌 Example:
2 boxes inside a shrinking container.

  • Box 1 → flex-shrink: 1

  • Box 2 → flex-shrink: 3

👉 As the container shrinks, Box 2 loses size much faster than Box 1.

✅ Quick memory trick:

  • Grow = Who gets more space when the container expands

  • Shrink = Who loses more space when the container shrinks

🔹 What is Flex-Basis?

  • Defines the starting size of the flex item before free space is distributed.

  • In a row → acts like width.

  • In a column → acts like height.

🔹 width / height

  • If no flex-basis is set, then normal width/height properties apply.

  • If neither is set, content size determines the item’s size.

🔹 min-width & max-width

  • max-width → The maximum limit an item can grow.
    Example: flex-basis: 200px; max-width: 100px; → item will never exceed 100px.

  • min-width → The minimum limit an item can shrink.
    Example: flex-basis: 200px; min-width: 300px; → item will never go below 300px.

🔹 flex-grow & flex-shrink Recap

  • flex-grow: 0 → won’t grow.

  • flex-grow: 1 → can grow and share leftover space.

  • flex-shrink: 0 → won’t shrink.

  • flex-shrink: 1 → will shrink proportionally.

👉 Default: flex-grow: 0; flex-shrink: 1;

🔹 Flex Shorthand

flex: grow shrink basis;

Examples:

  • flex: 1; → grow = 1, shrink = 1, basis = 0 → items grow/shrink equally.

  • flex: 2; vs flex: 1; → the first takes twice as much space.

✅ Final Summary

Flexbox sizing is a balance of 4 rules:

  • Grow → Can it expand when space is available?

  • Shrink → Can it reduce when space is tight?

  • Basis → What’s its starting size?

  • Min/Max → What are its absolute limits?

Comments

Post a Comment