CSS Flexbox

📘 CSS Flexbox Kya Hai?

Hindi: Flexbox CSS ka ek powerful layout system hai. Iski help se hum website ke elements ko easily arrange aur align kar sakte hain.

English: Flexbox is a CSS layout system used to arrange and align elements inside a container.

💡 Flexbox Kyu Use Karte Hain?

Flexbox ka use mainly elements ko:

• Ek line mein rakhne ke liye
• Center karne ke liye
• Left ya right align karne ke liye
• Equal spacing dene ke liye
• Responsive layout banane ke liye

1️⃣ display: flex

Flexbox use karne ke liye sabse pehle parent element par display: flex; lagate hain.

.container{
    display:flex;
}

Ab container ke andar ke elements flex items ban jaate hain.

2️⃣ flex-direction

flex-direction decide karta hai ki elements kis direction mein arrange honge.

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

Common values:

row → elements left se right
column → elements upar se neeche

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

3️⃣ justify-content

justify-content elements ko main direction mein position karne ke liye use hota hai.

.container{
    display:flex;
    justify-content:center;
}

Common values:

flex-start → starting position
center → center
flex-end → ending position
space-between → items ke beech space
space-around → items ke around space

4️⃣ align-items

align-items cross direction mein elements ko align karta hai.

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

Iska use elements ko vertically center karne mein bahut hota hai.

5️⃣ gap

Flex items ke beech space dene ke liye gap property use kar sakte hain.

.container{
    display:flex;
    gap:20px;
}

Isse har item ke beech 20px ka gap ho jayega.

💻 Complete Flexbox Example

Ab HTML aur CSS ko combine karke ek simple Flexbox layout banate hain.

<!DOCTYPE html>
<html>

<head>

<style>

.container{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.box{
    width:150px;
    padding:30px;
    background:#00d9ff;
    text-align:center;
    border-radius:10px;
}

</style>

</head>

<body>

<div class="container">

    <div class="box">Box 1</div>

    <div class="box">Box 2</div>

    <div class="box">Box 3</div>

</div>

</body>

</html>

🌐 Website Mein Flexbox

Professional websites mein Flexbox ka use navbar, buttons, cards aur different layouts banane ke liye kiya jata hai.

.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-links{
    display:flex;
    gap:25px;
}

⚠️ Important Note