CSS Flexbox

What is Flexbox?

Flexbox works on one primary axis at a time. Parent par display: flex lagate hi direct children flex items ban jaate hain.

.container {
  display: flex;
}

Main axis and cross axis

Main axis flex-direction follow karta hai; cross axis uske perpendicular hota hai. justify-content main axis aur align-items cross axis par kaam karta hai.

flex-direction

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

justify-content

.nav {
  display: flex;
  justify-content: space-between;
}

Common values: flex-start, center, flex-end, space-between, space-around and space-evenly.

align-items

.toolbar {
  display: flex;
  align-items: center;
}

Perfect centering

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

gap

gap repeated flex items ke beech clean spacing deta hai.

.button-group {
  display: flex;
  gap: 0.75rem;
}

flex-wrap

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

flex-basis, flex-grow and flex-shrink

.card {
  flex-basis: 240px;
  flex-grow: 1;
  flex-shrink: 1;
}

flex-basis starting size, flex-grow extra space growth aur flex-shrink tight space me shrinking control karta hai.

flex shorthand

.card {
  flex: 1 1 240px;
}

Responsive card row

.course-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.course-card {
  flex: 1 1 260px;
}

Auto margins

.nav {
  display: flex;
  align-items: center;
}

.sign-in {
  margin-left: auto;
}

order and source order

order visual order change karta hai, DOM reading order nahi. Accessibility ke liye source order ko logical rakho.

.featured {
  order: -1;
}

align-content

Multiple wrapped lines ke beech cross-axis spacing ko control karta hai when extra space exists.

min-width: 0 gotcha

.row {
  display: flex;
}

.content {
  flex: 1;
  min-width: 0;
}

Long content overflow me flexible child ko properly shrink karane ke liye min-width: 0 useful ho sakta hai.

Flexbox and accessibility

• Source order logical rakho.
• row-reverse, column-reverse aur order ka overuse avoid karo.
• Narrow viewport aur high zoom par layout test karo.
• Focus states visible rakho.

Best practices

• Alignment se pehle main/cross axis identify karo.
• Repeated spacing ke liye gap prefer karo.
• Wrapping cards ke liye flexible basis use karo.
• Two-dimensional layout problems me CSS Grid consider karo.

Common beginner mistakes

• justify-content ko always horizontal samajhna.
• align-items ko always vertical samajhna.
• flex-wrap bhoolna.
• order se semantic order replace karna.
• Long content overflow me min-width: 0 issue miss karna.