एक फ्लेक्स कंटेनर में समान ऊँचाई की पंक्तियाँ

Question

जैसा कि आप देख सकते हैं, list-itemsपहले rowमें समान है height। लेकिन दूसरे में आइटम rowअलग हैं heights। मैं चाहता हूं कि सभी वस्तुओं में एक समान हो height।

क्या निर्धारित ऊंचाई और केवल फ्लेक्सबॉक्स का उपयोग किए बिना इसे प्राप्त करने का कोई तरीका है ?

मेरा यहाँ है code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Comments

एक तरीका यह है कि ऊंचाई पर भिन्न हो सकने वाले तत्व पर ऊंचाई निर्धारित की जाए

— onmyway133

Answer 1

जवाब न है।

कारण फ्लेक्सबॉक्स विनिर्देश में प्रदान किया गया है:

6. फ्लेक्स लाइन्स

मल्टी-लाइन फ्लेक्स कंटेनर में, लाइन पर फ्लेक्स आइटम को शामिल करने के लिए प्रत्येक लाइन का क्रॉस आकार न्यूनतम आकार आवश्यक है।

दूसरे शब्दों में, जब एक पंक्ति-आधारित फ्लेक्स कंटेनर में कई लाइनें होती हैं, तो प्रत्येक लाइन ("क्रॉस आकार") की ऊंचाई लाइन पर फ्लेक्स आइटम को शामिल करने के लिए आवश्यक न्यूनतम ऊंचाई होती है।

समान ऊंचाई वाली पंक्तियाँ, हालांकि, सीएसएस ग्रिड लेआउट में संभव हैं:

• CSS Grid Layout में समान ऊँचाई पंक्तियाँ

अन्यथा, एक जावास्क्रिप्ट विकल्प पर विचार करें।

Comments

क्या सीएसएस ग्रिड अभी के लिए उपयोग करना सुरक्षित है?

— अलेक्जेंडर किम

Answer 2

अब आप कि पूरा कर सकते हैं के साथ display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

हालांकि ग्रिड स्वयं फ्लेक्सबॉक्स नहीं है, यह एक फ्लेक्सबॉक्स कंटेनर के समान व्यवहार करता है , और ग्रिड के अंदर के आइटम फ्लेक्स हो सकते हैं ।

ग्रिड लेआउट उस मामले में भी बहुत उपयोगी है, जब आप उत्तरदायी ग्रिड चाहते हैं। अर्थात, यदि आप चाहते हैं कि ग्रिड में प्रति पंक्ति एक अलग संख्या में कॉलम हों, तो आप बस बदल सकते हैं grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

और इसी तरह...

आप इसे मीडिया के प्रश्नों के साथ मिला सकते हैं और पृष्ठ के आकार के अनुसार बदल सकते हैं।

अफसोस की बात है कि अभी भी ब्राउज़रों (बॉक्स से बाहर) में कंटेनर प्रश्नों / तत्व प्रश्नों का कोई समर्थन नहीं है, यह कंटेनर के आकार के अनुसार कॉलम की संख्या को बदलने के साथ अच्छी तरह से काम करता है, पृष्ठ के आकार के लिए नहीं (यह उपयोग करने के लिए बहुत अच्छा होगा) पुन: प्रयोज्य वेबकंप्यूटरों के साथ)।

ग्रिड लेआउट के बारे में अधिक जानकारी:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

ग्रिड लेआउट के सकल ब्राउज़रों का समर्थन:

https://caniuse.com/#feat=css-grid

Comments

यह "पसंद" कर सकता है जो मुझे पसंद है! काम करने के उदाहरण के लिए धन्यवाद

— hananamar

यह उसी व्यवहार को लागू नहीं करता है जैसा कि फ्लेक्सबॉक्स रैपिंग करता है। फ्लेक्सबॉक्स का उपयोग करते हुए एक प्रश्न का उत्तर भी पूछा।

— एंडी

@Andy जैसा कि स्वीकृत उत्तर पहले से ही कहता है, आप फ्लेक्सबॉक्स (बिना js) के इसे प्राप्त नहीं कर सकते। मैंने यह भी कहना सुनिश्चित किया कि यह वास्तव में फ्लेक्सबॉक्स नहीं है ("हालांकि ग्रिड स्वयं फ्लेक्सबॉक्स नहीं है ..."), और मैं यह नहीं कह रहा हूं कि व्यवहार बिल्कुल फ्लेक्सबॉक्स (जो स्पष्ट है) के समान है, लेकिन यह बहुत है समान और हल किए गए मुद्दे को हल करता है (इस तथ्य को छोड़कर कि यह फ्लेक्सबॉक्स नहीं है), और इससे भी महत्वपूर्ण बात यह है कि यह एक समान दृष्टिकोण के लिए खोज करने वाले अन्य उपयोगकर्ताओं के लिए समान मुद्दों को हल कर सकता है। इसके अलावा, आइटम फ्लेक्सबॉक्स हो सकते हैं (उदाहरण के लिए, टेबल आइटम की अपेक्षा, टेबल आइटम के विपरीत)।

— लुकास बेसकर्नोटो

Answer 3

नहीं, आप एक निश्चित ऊंचाई निर्धारित करने के बिना (या स्क्रिप्ट का उपयोग करके) प्राप्त नहीं कर सकते।

---

यहाँ मेरे 2 उत्तर दिए गए हैं, जो दिखा रहा है कि स्क्रिप्ट का उपयोग कैसे करें जैसे कि कुछ हासिल करने के लिए:

• कार्ड से हेडर या फ्लेक्स बॉक्स के साथ समान ऊंचाई कैसे प्राप्त करें?

• फ्लेक्स-दिशा कॉलम फ्लेक्स कंटेनर में फ्लेक्स आइटम के लिए समान ऊंचाई

Answer 4

यह निश्चित मूल ऊंचाई (क्रोम और फ़ायरफ़ॉक्स में परीक्षण) के साथ मामलों में काम कर रहा है:

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

यदि किसी कारण से ग्रिड का उपयोग करना संभव नहीं है, तो शायद यह समाधान है।

Answer 5

यदि आप उन वस्तुओं को जानते हैं, जिनके माध्यम से आप मैप कर रहे हैं, तो आप एक समय में एक पंक्ति करके इसे पूरा कर सकते हैं । मुझे पता है कि यह एक वर्कअराउंड है, लेकिन यह काम करता है।

मेरे लिए मेरे पास प्रति पंक्ति 4 आइटम थे, इसलिए मैंने इसे प्रत्येक पंक्ति के साथ 4 की दो पंक्तियों में तोड़ दिया height: 50%, छुटकारा flex-growपाया <RowOne />और <RowTwo />एक के <div>साथ flex-column। यह चाल चलेगा

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Answer 6

आपके मामले में ऊंचाई की गणना स्वचालित रूप से की जाएगी, इसलिए आपको ऊंचाई का
उपयोग करना होगा

.list-content{
  width: 100%;
  height:150px;
}

Comments

मुझे खेद है, सामग्री के साथ ऊंचाई भिन्न हो सकती है। इसलिए निश्चित ऊंचाई नहीं दे सकते।

— जिनु कुरियन

हाइट्स की गणना स्वचालित रूप से की जाती है, इसलिए आपकी अलग सामग्री के साथ, हाइट्स अलग-अलग होंगे, इसलिए आपको निश्चित ऊंचाई का उपयोग करना होगा अन्यथा आप एक समान ऊँचाई प्राप्त नहीं कर सकते।

— टॉम

Answer 7

आप flexbox के साथ कर सकते हैं:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

Comments

मुझे नहीं लगता कि यह समान ऊँचाई देता है जब आइटम लंबवत रूप से स्टैक्ड होते हैं।

— वर्कवाइज

क्षमा करें, लेकिन आप मेरे जवाब को नकारात्मक मानने के बजाय एक और उत्तर देने की कोशिश कर सकते हैं!

— हिशम दलाल

Answer 8

आप इसे "P" टैग की ऊंचाई को निर्धारित करके या "सूची-आइटम" की ऊंचाई को ठीक करके कर सकते हैं।

मैंने "पी" की ऊंचाई तय करके किया है

और अतिप्रवाह छिपा होना चाहिए।

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Comments

लगता है कि मैं जिस उत्तर की तलाश कर रहा हूं, यदि वह सामग्री बड़ी हो गई है, तो उसे छिपा दिया जाएगा।

— जिनू कुरियन

@JinuKurian जहां मैं ओवरफ्लो जोड़ रहा हूं: छिपा हुआ, अगर आप इसे ओवरफ्लो करने के लिए बदलते हैं: ऑटो तो स्क्रॉल दिखाई देगा। तब आप पूरी सामग्री भी देख सकते हैं

— अजय मल्होत्रा

Answer 9

उसी ऊंचाई के लिए आपको अपने css "डिस्प्ले" प्रॉपर्टीज का पीछा करना चाहिए। अधिक विवरण के लिए दिए गए उदाहरण देखें।

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>

Comments

धन्यवाद, लेकिन मैं कई पंक्तियों में सूचियों को प्रदर्शित करना चाहता हूं।

— जिनु कुरियन