CSS में फ्लेक्सबॉक्स के साथ काम करना
जैसा कि आप जानते हैं, एक justify-content गुण है,
जो मुख्य अक्ष के साथ तत्वों को संरेखित करता है।
align-items गुण भी है, जो
क्रॉस अक्ष के साथ तत्वों को संरेखित करता है। आइए
इसके साथ थोड़ा खेलते हैं।
मान लीजिए कि अब ब्लॉक एक पंक्ति में व्यवस्थित हैं,
यानी क्रॉस अक्ष नीचे की ओर है।
align-items का उपयोग करके इन ब्लॉकों को
केंद्र में रखते हैं:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
width: 300px;
height: 300px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
आइए अब अधिक ब्लॉक जोड़ते हैं,
flex-wrap का उपयोग करके मल्टी-लाइन जोड़ते हैं,
माता-पिता की ऊंचाई 300px से बढ़ाकर
500px करते हैं और देखते हैं कि align-items
इस मल्टी-लाइन मामले में कैसे काम करता है:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
जैसा कि हम देखते हैं, कुछ ठीक से केंद्रित नहीं हो रहा है। ऐसा लगता है जैसे प्रत्येक पंक्ति स्वयं को अपने आवंटित स्थान पर केंद्रित कर रही है। आइए इसे ऐसा बनाते हैं कि सभी पंक्तियां एक समग्र इकाई के रूप में माता-पिता के केंद्र में आ जाएं।
इसके लिए align-content गुण का उपयोग करना चाहिए,
जो मल्टी-लाइन टेक्स्ट के लिए आवश्यक है।
आइए अपना कोड फिर से लिखें:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
align-content गुण align-items
के समान मान लेता है।
space-between मान
आइए उदाहरण के लिए space-between मान देखें।
माता-पिता की ऊंचाई 320px पर सेट करते हैं।
चूंकि हमारे पास तीन पंक्तियां हैं, और तदनुसार पंक्तियों के बीच
दो दूरी हैं, तो ये दूरी प्रत्येक
10px के बराबर होगी:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: space-between;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
stretch मान
आइए stretch मान आज़माएं।
इसके लिए चाइल्ड एलिमेंट्स की ऊंचाई हटाते हैं, और माता-पिता की
ऊंचाई 600px पर सेट करते हैं ताकि अधिक स्पष्ट प्रभाव दिखे।
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: stretch;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
align-content के लिए stretch मान
डिफ़ॉल्ट मान है। यदि हम चाइल्ड एलिमेंट्स की ऊंचाई पूरी तरह से हटा दें,
align-content गुण हटा दें,
लेकिन माता-पिता की ऊंचाई और flex-wrap
छोड़ दें - सब कुछ वैसे ही काम करेगा:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
लेकिन अगर flex-wrap भी हटा दिया जाए
- सब कुछ सिंगल-लाइन हो जाएगा:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: row;
width: 300px;
height: 600px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
border: 1px solid green;
}
:
अक्ष को बदलें
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
</div>
.parent {
display: flex;
flex-direction: column;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 500px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
विशेष शर्तें
flex-wrap: wrap के बिना कुछ भी काम नहीं करता है, भले ही हमारे पास एक लाइन हो:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
flex-wrap: wrap;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
flex-wrap: wrap हटाएं - align-content: center काम करना बंद कर देगा:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
align-content: center;
width: 300px;
height: 320px;
border: 1px solid red;
}
.child {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
