html लपेट से पहले फ्लेक्स आइटम को छोड़ दें



css css3 (1)

मेरे पास एक footer जो एक flex कंटेनर है I विंडो में क्षैतिज रूप से केन्द्रित पांच flex आइटमों को जोड़कर इसमें एक लोगो की छवि और चार पाठ तत्व शामिल हैं, जो किसी भी अतिरिक्त स्थान को उनके बीच के रिक्त स्थान की बजाय, सामूहिक वस्तुओं के बाएं और दाएं समान रूप से विस्तार करने की इजाजत देता है।

अधिकांश कमरे में उनके पास बहुत से कमरे हैं, लेकिन उन्हें छोटे खिड़कियों पर लपेटने की जरूरत है। वे यह ठीक करते हैं, सिवाय इसके कि यह सौंदर्यवादी अजीब लग रहा है। मैं पहले flex आइटम (लोगो छवि) को भाई-बहनों की तरह व्यवहार करने के लिए चाहता हूं, जब तक कि लपेट नहीं लेता, जहां मैं उसके भाई-बहनों को उसके बगल में रखता हूं, लेकिन इसके नीचे की रेखा पर नहीं जाना चाहता, जो कि वे वर्तमान में करते हैं। यहां बताया गया है कि यह वर्तमान में किस तरह से व्यवहार कर रहा है (ए) एक विस्तृत विंडो है और (बी) एक आकार बदल गया, छोटी खिड़की है:

और यहाँ है कि मैं इसे कैसे व्यवहार करना चाहूंगा:

मुझे विश्वास है कि align-self: stretch जोड़ना align-self: stretch पहले flex आइटम को align-self: stretch मदद मिलेगी, लेकिन यह प्रतीत नहीं होता है कि वह रेखा के ऊपर की तरफ लपेटने के लिए अभिप्रेत है।

यहां मेरा HTML है:

<footer>
    <a class='flex-item'><img></a>
    <a class='flex-item'>Two</a>
    <a class='flex-item'>Three</a>
    <a class='flex-item'>Four</a>
    <a class='flex-item'>Five</a>
</footer>

और सीएसएस:

footer {
    position: relative;
    max-width: $pageWidth;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    padding: 0 $baseGrid;
}

.flex-item {
    align-self: flex-start;
    margin-left: $baseGrid;
    &:first-child {
        align-self: stretch;
        margin-left: 0;
    }
}

css कुछ styl वेरिएबल्स का उपयोग करता है, लेकिन वे प्रश्न के मुताबिक नहीं हैं।


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

सीएसएस ग्रिड के साथ आप यद्यपि ऐसा करने में सक्षम होंगे, लेकिन फ़्लेक्सबॉक्स की तुलना में इसके पास कम ब्राउज़र समर्थन भी है।

यहां सबसे आसान और सबसे अच्छा फ्लेक्सबॉक्स समाधान 2-5 आइटम लपेट करना है। इसके साथ आप किसी भी सीमा से बच सकते हैं जो निश्चित ऊंचाई, पूर्ण स्थिति, आदि के कारण हो सकते हैं यदि वर्तमान मार्कअप को रखने और पूरी तरह से गतिशील, उत्तरदायी समाधान प्राप्त कर सकते हैं।

स्टैक स्निपेट

footer {
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
footer .footer-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
}
footer .footer-flex .flex-item {
    margin-left: 10px;
}

/* styles for this demo */
footer {
    border: 1px solid red;
}
footer + footer {
    max-width: 400px;
}
footer .footer-flex .flex-item {
    padding: 10px;
    border: 1px solid red;
}
<footer>
    <a class='flex-item'><img src="http://placehold.it/100" alt=""></a>
    <div class='footer-flex'>
      <a class='flex-item'>Two</a>
      <a class='flex-item'>Three</a>
      <a class='flex-item'>Four</a>
      <a class='flex-item'>Five</a>
    </div>
</footer>

Wider footer

<footer>
    <a class='flex-item'><img src="http://placehold.it/100" alt=""></a>
    <div class='footer-flex'>
      <a class='flex-item'>Two</a>
      <a class='flex-item'>Three</a>
      <a class='flex-item'>Four</a>
      <a class='flex-item'>Five</a>
    </div>
</footer>





flexbox