flex-grow

What it does

Controls how much an item grows compared to others when there is extra space.

Key Idea

• Default = 0 → item does NOT grow
• Bigger number = takes more space

Example 1 (Equal growth)

.item {
  flex-grow: 1;
}

👉 All items grow equally

Example:

• 3 items → each gets equal width

Example 2 (Different growth)

.item:nth-child(1) {
  flex-grow: 2;
}

👉 First item gets double space

Example:

• Item 1 → 2 parts
• Others → 1 part each

flex-shrink

What it does

Controls how items shrink when there is not enough space

Key Idea

• Default = 1 → items can shrink
• 0 → item will NOT shrink

Example

.item {
  flex-shrink: 0;
}

👉 Items keep their size → may overflow

🔥 Real Use Case

• Prevent logo or button from shrinking
• Keep important UI fixed size

flex-basis

👉 What it does

Sets the initial size of an item before growing/shrinking

🧠 Key Idea

• Works like width (in row)
• Works like height (in column)

🧪 Example

.item {
  flex-basis: 200px;
}

👉 Each item starts at 200px

⚠️ Important

flex-basis overrides width

.item {
  width: 100px;
  flex-basis: 200px;
}

👉 Final size = 200px

flex (MOST IMPORTANT)

👉 What it does

Shortcut for:

flex: grow shrink basis;

🧪 Example

.item {
  flex: 1 1 200px;
}

👉 Means:

• grow = 1 → can expand
• shrink = 1 → can shrink
• basis = 200px → starting size

Responsive cards (BEST USE)

.item {
  flex: 1 1 250px;
}

👉 Cards:

• Try to be 250px
• Grow if space
• Shrink if needed 

align-self

👉 What it does

Overrides align-items for one specific item

🧠 Key Idea

• Works on cross-axis
• Individual control

🧪 Example

.item:nth-child(2) {
  align-self: center;
}

👉 Only second item is centered

🔥 Values

• flex-start
• flex-end
• center
• stretch

order

👉 Controls visual order of items (without changing HTML)

.item:nth-child(1) {
  order: 2;
}

.item:nth-child(2) {
  order: 1;
}

👉 Output:

• Item 2 appears first
• Item 1 appears later

🔥 Use case:

• Reordering layout in responsive design

Default Values

Most people forget this 👇

.container {
  display: flex;
}

👉 Default behavior:

flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;

👉 Important for debugging layouts