CSS Flexbox kya hai?

Flexbox ek CSS layout model hai jo container ke andar items ko efficiently align aur distribute karne me madad karta hai. Ye 1-dimensional layout provide karta hai, jisme items row ya column me arrange hote hain.

Flex Container aur Flex Items

Flexbox me do main parts hote hain:

Flex Container: Wo parent element jisme display: flex; apply kiya jata hai.
Flex Items: Container ke andar ke direct child elements jo flexbox ke rules ko follow karte hain.

Basic Example

Item 1

Item 2

Item 3

Item 4

<div style="display:flex;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Flexbox ke Important Properties

flex-direction: Items ko row ya column me arrange karta hai. Values: row, column, row-reverse, column-reverse.
justify-content: Main axis pe items ko align karta hai. Values: flex-start, center, space-between, space-around.
align-items: Cross axis (perpendicular) pe single line items ko align karta hai. Values: stretch, center, flex-start, flex-end.
flex-wrap: Items ko wrap hone deta hai agar container me space kam ho. Values: nowrap, wrap.
order: Items ka sequence change karta hai.

Flex Items ki Properties

flex-grow: Extra space lena chahiye ya nahi.
flex-shrink: Shrink hone ki capability.
flex-basis: Initial size set karta hai.
align-self: Individual item ke alignment ko override karta hai.

Summary

Flexbox aaj ke time me responsive aur complex layouts banane ke liye bahut popular aur powerful tool hai. Isse aap easily flexible aur aligned designs bana sakte hain bina float ya positioning ke jhanjhat ke.