html - डेस्कटॉप और मोबाइल दृश्यों के लिए आइटम को फिर से व्यवस्थित करने के लिए फ्लेक्स ऑर्डर संपत्ति का उपयोग करना



css html5 (1)

मैं एक कंटेनर के अंदर 3 divs है। कोई नेस्टेड डिव नहीं हैं।

मैं फ्लेक्स और order प्रॉपर्टी का उपयोग कर रहा हूं।

मोबाइल पर, यह order संपत्ति के साथ ठीक है।

लेकिन बड़ी स्क्रीन पर यह विफल हो जाता है।

मैंने मोबाइल पर 2,1,3 के रूप में ऑर्डर करने के लिए divs 2 और 3 के लिए एक कंटेनर div का उपयोग नहीं किया।

HTML फ़ाइल

<div class="container">
<div class="orange">1</div>
<div class="blue">2</div>
<div class="green">3</div>
</div>

सीएसएस फ़ाइल

/*************** MOBILE *************/
.container
{
    display: flex;
    flex-wrap: wrap;

}
div.blue
{
    order:1;
    width: 100%;
}
div.orange
{
    order:2;
    width: 100%;
}
div.green
{
    order:3;
    width: 100%;

}
/***************************/
@media screen and (min-width:1200px)
{
.container
{
    justify-content: space-between;
}
div.blue
{
    order:2;
    width: 36%;
}
div.orange
{
    order:1;
    width: 60%;
}
div.green
{
    order:3;
    width: 36%;
}
}

आपके लेआउट में, डेस्कटॉप दृश्य के लिए row wrap का उपयोग करना मुश्किल होगा, यदि सीएसएस के साथ लागू करना असंभव नहीं है। कम से कम, चीजें अत्यधिक जटिल हो जाएंगी। क्यूं कर?

क्योंकि फ्लेक्सबॉक्स एक ग्रिड सिस्टम नहीं है। यह एक लेआउट प्रणाली है जिसे कंटेनर में स्थान के वितरण द्वारा सामग्री संरेखित करने के लिए डिज़ाइन किया गया है।

फ्लेक्सबॉक्स में, एक row wrap कंटेनर में आइटम को नई पंक्तियों से लपेटना चाहिए। इसका मतलब यह है कि div3 div2 के नीचे नहीं लपेट सकता है। इसे div1 के नीचे लपेटना चाहिए।

यहां बताया गया है कि row wrap साथ फ्लेक्स कंटेनर में आइटम कैसे row wrap :

अगर div3 को div2 के तहत लपेटना है, तो यह एक पंक्ति नहीं होगी, जो कि एक ग्रिड होगी , और फ्लेक्स आइटम एक सीधी, अटूट पंक्ति तक ही सीमित रहेंगे।

एक और तरीका रखो, आप एक ही पंक्ति में किसी अन्य आइटम के तहत एक फ्लेक्स आइटम लपेट नहीं कर सकते।

नतीजतन, आइटम द्वारा बनाई गई सफेद जगह जो पंक्ति में सबसे ऊंची नहीं होती है, प्रत्येक कॉलम में संरक्षित होती है, जिससे भद्दा अंतराल पैदा होता है।

row wrap में काम करने के लिए आपके वांछित लेआउट के लिए, फ्लेक्स आइटम को अंतर को बंद करने के लिए अपनी पंक्ति से बाहर निकलना होगा - शायद पूर्ण स्थिति के साथ - जो फ्लेक्सबॉक्स नहीं कर सकता।

वस्तुओं को संरेखित करने का एक तरीका अपने स्वयं के कंटेनर में div2 और div3 को लपेटना होगा। यह नया कंटेनर div1 का सहोदर होगा। यह तब flex-direction: column साथ नेस्टेड फ्लेक्स कंटेनर बन सकता है। अब अंतराल चले गए हैं और लेआउट सही दिखता है।

सिवाय, इस विशेष मामले में, आपको काम करने के लिए order प्रॉपर्टी की आवश्यकता है (जिसका अर्थ है कि सभी वस्तुओं में एक ही माता-पिता होना चाहिए), इसलिए एक नेस्टेड फ्लेक्स कंटेनर प्रश्न से बाहर है।

row wrap बजाय column wrap क्या हो सकता है:

/*************** MOBILE *************/

.container {
  display: flex;
  flex-direction: column;
  height: 200px; /* necessary so items know where to wrap */
}
div.orange {
  background-color: orange;
}
div.blue {
  order: -1;
  background-color: aqua;
}
div.green {
  background-color: lightgreen;
}
.container > div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/***************************/

@media screen and (min-width: 800px) {
  .container {
    flex-wrap: wrap;
  }
  div.orange {
    flex-basis: 100%;
    width: 50%;
  }
  div.blue {
    flex-basis: 50%;
    width: 50%;
    order: 0;
  }
  div.green {
    flex-basis: 50%;
    width: 50%;
  }
}
<div class="container">
  <div class="orange">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
</div>

jsFiddle

यहाँ दो अन्य विकल्प हैं:

  • डेसेंड्रो मेसनरी

    चिनाई एक जावास्क्रिप्ट ग्रिड लेआउट लाइब्रेरी है। यह उपलब्ध ऊर्ध्वाधर स्थान के आधार पर तत्वों को इष्टतम स्थिति में रखकर काम करता है, एक दीवार में एक मेसन फिटिंग पत्थरों की तरह।

    स्रोत: http://masonry.desandro.com/

  • सीएसएस ग्रिड लेआउट मॉड्यूल स्तर 1

    यह सीएसएस मॉड्यूल उपयोगकर्ता इंटरफ़ेस डिज़ाइन के लिए अनुकूलित दो-आयामी ग्रिड-आधारित लेआउट सिस्टम को परिभाषित करता है। ग्रिड लेआउट मॉडल में, ग्रिड कंटेनर के बच्चों को पूर्वनिर्धारित लचीले या निश्चित आकार के लेआउट ग्रिड में मनमाने ढंग से स्लॉट में तैनात किया जा सकता है।

    स्रोत: https://drafts.csswg.org/css-grid/

संबंधित पोस्ट: फ्लेक्स आइटम के लिए क्या यह संभव है कि उनके ऊपर की वस्तुओं को कसकर संरेखित करें?





flexbox