यदि आप नीचे दिए गए स्निपेट को चलाते हैं तो आप देख सकते हैं कि flexbox container में दोनों पंक्तियों का height अलग है। क्या कोई इसे समझा सकता है?

यदि आप पंक्ति A टिप्पणी करते हैं (= flexbox आइटम से स्पष्ट height को हटाते हैं) तो height में दोनों पंक्तियां समान हो जाती हैं। मुझे समझ नहीं आता क्यों?

यहां उसी स्निपेट का JSfiddle है, अगर यह सुविधाजनक है।

*{
  color: blue;
  font-size: 22px;
}
.box1 {
  width: 50px;
  background-color: black;
  border: 1px solid blue;
}

.box2 {
  width: 50px;
  background-color: red;
  border: 1px solid blue;
}

.box3 {
  width: 50px;
  height: 30px;/*Line A: comment this and both rows will have same height*/
  background-color: yellow;
  border: 1px solid blue;
}

.container {
  display: flex;
  width: 160px;
  height: 500px;
  border: 1px solid red;
  align-items: stretch;
  flex-wrap:wrap;
}
<div class="container">
    <div class="box1">.box1</div>
    <div class="box2">.box2</div>
    <div class="box3">.box3</div>
    <div class="box1">.box1</div>
    <div class="box2">.box2</div>
</div>

मेरी समझ:

मुझे flex-wrap: wrap का कोई विस्तृत विवरण नहीं मिला। MDN और CSS-tricks बस यह कहें कि जब wrap आइटम लागू किए जाते हैं होगा width = flex-basis और जब एक row आइटम के साथ किया जाता है, तो आइटम अगले flexbox row पर चले जाएंगे। लेकिन इन rows का flexbox container के भीतर संरेखण क्या होगा?

मेरी समझ यह है: (यह मानते हुए कि flex-direction: row और रैपिंग की अनुमति है) यदि आइटम एक से अधिक row पर कब्जा कर रहे हैं, तो प्रत्येक row की ऊंचाई समान होगी (= flexbox_container_height/row_count) और प्रत्येक row flexbox container के रूप में कार्य करते हैं। इसलिए यदि मैं एक संपत्ति flex-items:center लागू करता हूं, तो आइटम इनमें से प्रत्येक पंक्ति के अंदर केंद्रित हो जाएंगे।

क्या मेरी समझ सही है?

4
dasfdsa 25 जुलाई 2018, 11:58
1
@LGSon, मैं इस सवाल से गुजरा लेकिन मुझे कुछ नहीं मिला। यह प्रश्न किसी भी तरह से संरेखण-सामग्री से संबंधित नहीं है क्योंकि केवल एक फ्लेक्स लाइन है। क्या आप मुझे इस पर संकेत दे सकते हैं? हो सकता है कि मुझसे कुछ छूट रहा हो।
 – 
dasfdsa
25 जुलाई 2018, 16:20
wrap लागू किया गया है या नहीं, flex-basis चौड़ाई के लिए Flexbox की संपत्ति है, हालांकि width का अभी भी उपयोग किया जा सकता है, लेकिन flex-grow के साथ इंटरैक्ट नहीं करेगा और flex-shink जैसा कि flex-basis करता है। जब एक पंक्ति भर जाती है, और आइटम अगले पर चले जाते हैं, तो 'संरेखण-सामग्री' इसके वितरण/संरेखण क्रॉस अक्ष (पंक्ति दिशा के लिए ऊंचाई) को नियंत्रित करती है। डब्ल्यू/ओ wrap, या यदि आइटम की केवल एक पंक्ति, align-items करता है। यह इस बात का भी उत्तर देता है कि जब टिप्पणी पंक्ति A वही करती है जो वह करती है। यदि आप align-* गुणों के बारे में पढ़ते हैं तो यह अधिक समझ में आता है। हालांकि, ध्यान दें कि फ्लेक्सबॉक्स को पूरी तरह से समझाने के लिए विषय बहुत व्यापक है।
 – 
Asons
25 जुलाई 2018, 18:12
मैंने एक और डुप्ली लिंक भी जोड़ा, जो एक अच्छा पढ़ा है, और ध्यान दें, फ्लेक्सबॉक्स को सीखने में कुछ समय लग सकता है क्योंकि इसमें बहुत सारी विशेषताएं हैं।
 – 
Asons
25 जुलाई 2018, 18:15
और क्या एक या दूसरा एक डुप्ली है, यह कहना मुश्किल है, क्योंकि आप फ्लेक्सबॉक्स के एक बड़े हिस्से पर सवाल उठाते हैं।
 – 
Asons
25 जुलाई 2018, 18:22
यह वास्तव में एक अच्छा प्रश्न है। यह एक ऐसा मुद्दा उठाता है जिस पर अधिक ध्यान नहीं दिया गया है और इसलिए इसका पता लगाना आसान नहीं है। इसका flex-wrap या align-items / align-content से कोई लेना-देना नहीं है। @LGSon
 – 
Michael Benjamin
25 जुलाई 2018, 18:43

2 जवाब

सबसे बढ़िया उत्तर

यहां समस्या flex-wrap या align-items या align-content (कम से कम सीधे तौर पर नहीं) है।

असली समस्या है box-sizing.

मुख्य बिंदु:

free space !== length 

box-sizing प्रॉपर्टी लंबाई पर लागू होती है, जिसमें height, width और flex-basis.

box-sizing प्रॉपर्टी नहीं खाली जगह पर लागू होती है, इसलिए इसे align-items, flex-grow, justify-content, fr और द्वारा अनदेखा कर दिया जाता है। अन्य गुण और कार्य जो मुक्त स्थान का प्रबंधन करते हैं।


box-sizing

box-sizing गुण दो मान लेता है:

  • content-box (डिफ़ॉल्ट मान)
  • border-box

content-box के साथ, आपके द्वारा परिभाषित कोई भी लंबाई नहीं में पैडिंग या बॉर्डर शामिल होंगे।

border-box के साथ, पैडिंग और बॉर्डर को आपकी लंबाई की गणना में शामिल किया जाता है।

CSS Box Model का संदर्भ देते समय उन शब्दों पर विचार करें।

enter image description here

स्रोत: W3C

ध्यान दें कि box-sizing कोई padding-box या margin-box मान नहीं देता है। मार्जिन हमेशा अलग से जोड़े जाते हैं।


तुम्हारा कोड

यहां आपका फ्लेक्स कंटेनर है:

.container {
   display: flex;
   flex-wrap: wrap;  
   align-items: stretch; /* default setting */
   width: 160px;
   height: 500px;
   border: 1px solid red;
}

आपके फ्लेक्स आइटम में, एक क्षण के लिए box3 को हटा दें। यह वह आइटम है जिसकी निर्धारित ऊंचाई 30px है।

.container {
  display: flex;
  flex-wrap: wrap;  
  align-items: stretch; /* default setting */  
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--<div class="box3">box3</div>-->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

मुख्य अवलोकन:

  • दोनों पंक्तियों की ऊंचाई अब 250px है।
  • भले ही ऊपर/नीचे की सीमाओं में 4px हैं, और box-sizing डिफ़ॉल्ट content-box पर है, फिर भी ऊंचाई 250px है।
  • सीमाओं को नजरअंदाज कर दिया जाता है क्योंकि वस्तुओं की ऊंचाई align-items: stretch (एक खाली स्थान, लंबाई नहीं, गणना) का उपयोग करके निर्धारित की जाती है।

अब, align-items: stretch का उपयोग करने के बजाय, आइए प्रत्येक आइटम के लिए height: 50% का उपयोग करें:

.container {
  display: flex;
  flex-wrap: wrap;  
  /* align-items: stretch; */  
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  height: 50%; /* NEW */
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--<div class="box3">box3</div>-->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

प्रत्येक आइटम (और पंक्ति) की ऊंचाई अब 252px है। ऊपर और नीचे की सीमाओं को जोड़ा गया है।

अगर हम box-sizing: border-box जोड़ते हैं, तो हम align-items: stretch की तरह ही 250px पर वापस आ जाते हैं।

.container {
  display: flex;
  flex-wrap: wrap;  
  /* align-items: stretch; */  
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  box-sizing: border-box;  /* NEW */
  height: 50%;
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <!--<div class="box3">box3</div>-->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

.box3

आइए अब .box3 को HTML संरचना में फिर से पेश करें, box-sizing: content-box और align-items: stretch को पुनर्स्थापित करें, और आइटम पर height: 50% को हटा दें। हम मूल लेआउट पर वापस आ गए हैं।

.container {
  display: flex;
  flex-wrap: wrap;  
  align-items: stretch; 
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  color: blue;
  font-size: 22px;
}
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

पहली पंक्ति के align-items: stretch आइटम की ऊंचाई 252px है।

दूसरी पंक्ति के align-items: stretch आइटम की ऊंचाई 248px है।

ऐसा इसलिए है क्योंकि box3 की वास्तविक लंबाई परिभाषित (height: 30px) है, जो box-sizing: content-box को सक्रिय करती है, जो ऊपर और नीचे की सीमाओं (2px) को पंक्ति की ऊंचाई (252px) में जोड़ती है।

तो चलिए box-sizing: border-box को box3 पर लागू करते हैं।

सही लगता है, सिवाय align-items को box-sizing की परवाह नहीं है।

इसलिए हालांकि box-sizing पहली पंक्ति को 250px बनाता है, फिर भी सीमाओं की गणना दूसरी पंक्ति (248px) में की जाती है।

.container {
  display: flex;
  flex-wrap: wrap;  
  align-items: stretch; 
  width: 160px;
  height: 500px;
  border: 1px solid red;
}

.box3 { height: 30px; }


.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div {
  flex: 0 0 50px;
  border: 1px solid blue;
}

* {
  box-sizing: border-box; /* new */
  color: blue;
  font-size: 22px;
}
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

ध्यान दें कि padding और borders के अलावा, इस विशेष लेआउट में line-height और font-size से संबंधित समस्याएं भी हैं। पंक्ति की ऊंचाई स्पष्ट रूप से समझ में आने के लिए, आपको उन कारकों को हटाना होगा।

* {
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;  
  width: 160px;
  height: 500px;
}

.box3 { height: 30px; }

.box1 { background-color: gray;   }
.box2 { background-color: orange; }
.box3 { background-color: yellow; }

.container > div { flex: 0 0 50px; }
<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

अब पहली पंक्ति के आइटम की ऊंचाई 265px है, और दूसरी पंक्ति के आइटम की ऊंचाई 235px है।

गणना में सभी निश्चित लंबाई को शामिल करने के बाद जो बचा है वह खाली स्थान है।

500 - 30 = 470 ----> this is the free vertical space in your container

470 / 2 = 235  ----> this is the free space allocated to each row

235 + 30 = 265  ----> this is the height of the first row, since 30px is added to the free space
9
Michael Benjamin 26 जुलाई 2018, 03:22
1
मैंने ओपी के "...फ्लेक्सबॉक्स कंटेनर में दोनों पंक्तियों की ऊंचाई को पूरी तरह से गलत समझा/गलत समझा।"। बढ़िया, ऊपर उठाया गया ... और यह नहीं देख सकता कि यह कैसे कम या ज्यादा जगह नहीं है :)
 – 
Asons
25 जुलाई 2018, 20:11
अंतिम स्निपेट तक, आपकी व्याख्या बॉक्स-साइज़िंग पर आधारित थी। मैं कहूंगा कि मैंने तुम्हें 80% प्राप्त किया है। लेकिन आखिरी वाक्य में आखिरी वाक्य में, मैंने आपको पूरी तरह से खो दिया: यह तब 30px निश्चित ऊंचाई में कारक है जो पंक्ति एक में 15px खाली स्थान जोड़कर और पंक्ति दो से 15px हटा देता है।। ऐसा करने के पीछे क्या कारण है? क्या आप उन दस्तावेज़ों का उल्लेख कर सकते हैं जो किसी अन्य पंक्ति से h/2 लेने के इस व्यवहार की व्याख्या करते हैं? अच्छे भगवान। जब मैंने सवाल पूछा था तो अब मैं उससे ज्यादा उलझन में हूं।
 – 
dasfdsa
25 जुलाई 2018, 21:32
माफ़ करना। मुझे और अधिक स्पष्ट और विशिष्ट होना चाहिए था। अब उस खंड को फिर से पढ़ें। यदि आपके और प्रश्न हैं तो मुझे बताएं।
 – 
Michael Benjamin
25 जुलाई 2018, 21:37
आपके अंतिम संपादन के लिए धन्यवाद। मुझे यकीन है कि इस व्यवहार के साथ कई अन्य विवरण भी हैं। क्या आप इस व्यवहार को समझाते हुए कुछ दस्तावेज़ों का उल्लेख कर सकते हैं? इससे काफी मदद मिलेगी।
 – 
dasfdsa
25 जुलाई 2018, 21:52
1
आपके द्वारा @Michael_B को दिए गए समय और प्रयास के लिए धन्यवाद। मैं इसके लिए सचमुच आभारी हूं। मैं सिद्धांत रूप में सीएसएस सीख रहा हूँ। आशा है कि मैं इसे उसी तरह वापस योगदान दूंगा।
 – 
dasfdsa
26 जुलाई 2018, 14:10

आप कंटेनर को 500px की ऊंचाई और बॉक्स 3 को 30px की ऊंचाई दे रहे हैं जो कंटेनर का एक चाइल्ड एलिमेंट है।

आपको माता-पिता के बच्चे के रिश्ते को समान ऊंचाई का मूल्य देना चाहिए या उन्हें अपनी समान ऊंचाई लेने के लिए कोई ऊंचाई नहीं देनी चाहिए।

-3
Sonia 25 जुलाई 2018, 12:04
धन्यवाद, लेकिन यह मेरे प्रश्न का उत्तर नहीं देता है। आप जो कह रहे हैं, मैंने अपने प्रश्न में पहले ही उल्लेख कर दिया है। मैंने स्पष्ट रूप से पूछा है: क्या कोई इसे समझा सकता है?। मैं ऐसा क्यों हो रहा है पर स्पष्टीकरण ढूंढ रहा हूं, समाधान नहीं।
 – 
dasfdsa
25 जुलाई 2018, 12:08