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.

Axis ko fixed horizontal/vertical rule mat samjho. Default row me main axis left-to-right hota hai, lekin flex-direction: column lagate hi main axis vertical ho jata hai. Isi wajah se same justify-content: center different direction me different visual movement deta hai. Layout debug karte waqt pehle direction identify karo, phir alignment property choose karo.

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;
}

Without wrapping, flex items normally try to stay on one flex line and may shrink more than you expect. flex-wrap: wrap allows later items to move onto a new line when space becomes tight. Wrapping is especially useful for chip groups, toolbars and card rows, but remember that each flex line is laid out independently; if you need rows and columns to align as one two-dimensional system, Grid is usually the better tool.

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.

These three values work together, so a flex item is not simply “240px wide.” A basis of 240px gives the sizing algorithm a preferred starting point; positive grow values can distribute leftover space, while shrink values decide how items give up space when the container is too small. This is why flex: 1 1 240px can produce responsive cards that grow on wide screens and wrap or shrink on narrower screens.

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;
}

Auto margins can absorb available free space on the main axis. In a navigation bar, margin-left: auto on one item effectively pushes that item toward the far edge while earlier items stay grouped together. Ye technique simple “logo + links + sign-in button” layouts me useful hai and often extra wrapper elements ki need reduce karti hai.

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.