CSS Flexbox (Flexible Box Layout) एक CSS layout system है जिसका उपयोग HTML elements को row या column में आसानी से arrange करने के लिए किया जाता है।

Flexbox का उपयोग responsive website design बनाने के लिए बहुत ज्यादा किया जाता है।

Flexbox के Basic Concepts

Flexbox में दो मुख्य elements होते हैं:

1. Flex Container
2. Flex Items

Example :

<div class="container">
    <div class="item">Box 1</div>
    <div class="item">Box 2</div>
    <div class="item">Box 3</div>
</div>

Flex Container बनाने के लिए

Container में:

.container {
    display: flex;
}

Flexbox की मुख्य Properties

1. flex-direction

flex-direction यह तय करता है कि items किस दिशा में दिखेंगे।

Syntax:

.container {
    flex-direction: value;
}

Values:

Value	काम
row	Left से Right (default)
row-reverse	Right से Left
column	ऊपर से नीचे
column-reverse	नीचे से ऊपर

2. justify-content

justify-content का use main axis पर items की position control करता है।

Syntax:

.container {
    justify-content:value;
}

Values:

Value	Meaning
flex-start	शुरुआत में
flex-end	अंत में
center	बीच में
space-between	बराबर दूरी
space-around	चारों तरफ space
space-evenly	समान space

3. align-items

align-item का use cross axis पर items को align करने के लिए किया जाता है।

Syntax:

.container {
    align-items:value;
}

Values:

Value	काम
flex-start	ऊपर
flex-end	नीचे
center	बीच
stretch	पूरी height

4. flex-wrap

flex-wrap का use items के लिए जगह कम हो तो नई line में भेजने के लिए किया जाता है।

.container {
    flex-wrap:wrap;
}

Values:

Value	Meaning
nowrap	एक ही line
wrap	नई line में
wrap-reverse	उल्टी दिशा में

5. gap Property

gap property का use Flex items के बीच distance देने के लिए किया जाता है।

Example :

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

Flex Items की Properties

1. flex-grow

flex-grow का use Item को extra space लेने की अनुमति मांगने के लिए किया जाता है।

Example:

.item {
    flex-grow:1;
}

---

2. flex-shrink

flex-shrink का use Item को छोटा होने की अनुमति मांगने के लिए किया जाता है।

Example:

.item {
    flex-shrink:1;
}

---

3. flex-basis

flex-basis का use Item की initial size तय करने के लिए किया जाता है।

Example:

.item {
    flex-basis:200px;
}

---

4. flex (Short Hand)

flex (short hand) का use तीनों properties को एक साथ लिखने के लिए किया जाता हैं।

.item {
    flex:1;
}

इस प्रकार लिख सकते है –

flex-grow:1;
flex-shrink:1;
flex-basis:0;

---

5. align-self

align-self का use एक individual item को अलग position देने के लिए किया जाता हैं।

Example:

.item {
    align-self:center;
}