html दो कॉलम के साथ फ्लेक्सबॉक्स पंक्ति, संकीर्ण स्क्रीन के लिए क्रमबद्ध



css css3 (1)

मैं फ्लेक्सबॉक्स का उपयोग करते हुए एक उत्तरदायी लेआउट बनाने की कोशिश कर रहा हूं जहां बड़ी संख्या में एक या दो आइटम (दो और चार) को स्टैक्ड करना पड़ता है, एक बड़ी स्क्रीन पर, लेकिन फिर संकीर्ण स्क्रीन पर क्रम में बदलने की जरूरत है ताकि वे तीन स्टैक्ड, एक, दो, तीन, चार

मेरे पास एक समाधान है, लेकिन यह सूख नहीं है, जैसा कि आप स्निपेट में देख सकते हैं मैंने अनुभाग चार को दोहराया है I

क्या दोहराव के बिना यह फ्लेक्सबॉक्स का उपयोग करना संभव है?

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid red;
}
.section {
  border: 1px solid green;
  flex-grow: 1;
}
.one, .two, .four {
  width: 100%;
}
.sub-container {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
}
.mobile-only {
  display: none;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
  .sub-container {
    width: 100%;
  }
  .section {
    width: 100%;
  }
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}
<div class="container">
  <div class="section one">One</div>
  <div class="sub-container">
    <div class="section two">Two</div>
    <div class="section four desktop-only">Four</div>
  </div>
  <div class="section three">Three</div>
  <div class="section four mobile-only">Four</div>
</div>


फ्लेक्सबॉक्स को 2-आयामी ग्रिड (जहां कॉलम और पंक्तियों को एक दूसरे को छेद सकता है) के निर्माण के लिए डिज़ाइन नहीं किया गया है। इसलिए आपके लेआउट को फ्लेक्स गुणों का उपयोग करने के लिए काम करने के लिए, आपको वहां अपना रास्ता हैक करना होगा।

इस समस्या का एक और अधिक पूर्ण विवरण है:

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

हालांकि, सीएसएस ग्रिड के साथ आपका लेआउट सरल और आसान है।

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 5px;
  grid-template-areas: " one one "
                       " two three "
                       " four three ";
}

.one   { grid-area: one; }
.two   { grid-area: two; }
.three { grid-area: three; }
.four  { grid-area: four; }

@media ( max-width: 600px ) {
  .container {
       grid-template-columns: 1fr;
       grid-template-areas: " one "
                            " two "
                            " three"
                            " four ";
       }
}

/* non-essential; just for demo */
.section {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="section one">One</div>
  <div class="section two">Two</div>
  <div class="section three">Three</div>
  <div class="section four">Four</div>
</div>

https://jsfiddle.net/9fyprm3u/

ग्रिड विनिर्देश ग्रिड को डिजाइन करने के लिए कई तरीके प्रदान करता है। इस मामले में, मैंने grid-template-areas संपत्ति का उपयोग किया है जो आपको एएससीआईआई आर्ट का उपयोग कर ग्रिड मदों को प्रदर्शित करने की अनुमति देता है।

ब्राउज़र समर्थन





css-grid