किसी एकल फ्लेक्सबॉक्स आइटम को औचित्य कैसे दें (औचित्य-सामग्री को ओवरराइड करें)

Question

आप किसी फ्लेक्स आइटम के align-itemsसाथ ओवरराइड कर सकते हैं align-self। मैं justify-contentएक फ्लेक्स आइटम के लिए ओवरराइड करने का तरीका ढूंढ रहा हूं ।

यदि आपके पास एक फ्लेक्सबॉक्स कंटेनर था justify-content:flex-end, लेकिन आप चाहते हैं कि पहला आइटम हो justify-content: flex-start, तो यह कैसे किया जा सकता है?

इस पोस्ट द्वारा इसका सबसे अच्छा उत्तर दिया गया: https://stackoverflow.com/a/33856609/269396

Comments

autoमार्जिन का उपयोग करें । बॉक्स # 26 यहां देखें: stackoverflow.com/a/33856609/3597276

— माइकल बेंजामिन

सबसे उपयोगी उत्तर से जोड़ने के लिए धन्यवाद!

— ब्रैडी डॉवलिंग

Answer 1

हो प्रतीत नहीं होता है justify-self, लेकिन आप समान परिणाम रूपरेखा उचित प्राप्त कर सकते हैं marginकरने के लिए auto¹। ई। जी। के लिए flex-direction: row(डिफ़ॉल्ट) आप स्थापित करना चाहिए margin-right: autoबाईं ओर बच्चे संरेखित करने के लिए।

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}

<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

Defined यह व्यवहार Flexbox कल्पना द्वारा परिभाषित किया गया है ।

Comments

यह तकनीक उत्कृष्ट है और यह ऊर्ध्वाधर दिशा में भी काम करती है। उदाहरण के लिए, आप चाहते हैं कि अंतिम ऊंचाई कंटेनर के अंदर अंतिम तत्व नीचे की ओर चिपके रहे। आप `` `.कंटेनर {फ्लेक्स-दिशा: कॉलम का उपयोग कर सकते हैं; दोनों ओर संरेखित-सामग्री: फ्लेक्स शुरू} .last-मद {मार्जिन टॉप: ऑटो} `` `

— ईसाई Schlensker

@krulik इस व्यवहार को Flexbox कल्पना द्वारा परिभाषित किया गया है, w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— Pavlo

कुछ और जांच के बाद, justify-selfइससे कुछ लेना-देना नहीं हो सकता है , flexboxबल्कि इसके साथ प्रयोग किया जाता है, css gridsलेकिन मुझे यकीन नहीं है। मैं इसे फ्लेक्सबॉक्स के साथ क्रोम में काम करने के लिए प्राप्त नहीं कर सकता।

— जेक विल्सन

क्या होगा यदि मैं चाहता हूं कि एक आइटम बाईं ओर हो, और दूसरा एक केंद्र में हो?

— फ़ाहमी

"फ्लेक्सबॉक्स लेआउट में, इस संपत्ति को अनदेखा किया जाता है"

— फिनले पर्सी

Answer 2

AFAIK के लिए ऐनक में कोई संपत्ति नहीं है, लेकिन यहां एक चाल है जो मैं उपयोग कर रहा हूं: कंटेनर तत्व (एक के साथ display:flex) justify-content:space-around फिर पहले और दूसरे आइटम के बीच एक अतिरिक्त तत्व जोड़ें और इसे flex-grow:10(या कुछ) पर सेट करें अन्य मूल्य जो आपके सेटअप के साथ काम करते हैं)

संपादित करें: यदि आइटम कसकर गठबंधन किए जाते हैं flex-shrink: 10;तो अतिरिक्त तत्व के साथ भी जोड़ना एक अच्छा विचार है , इसलिए लेआउट छोटे उपकरणों पर ठीक से उत्तरदायी होगा।

Comments

यह चौड़ाई निर्दिष्ट किए बिना काम करता है (कम से कम यह मेरी स्थिति में था)

— ईगलबाज्स

कोशिशmin-width: 0

— Dembinski

Answer 3

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

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

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

Answer 4

ऐसा लगता है जैसे justify-selfब्राउज़र में जल्द ही आ रहा है । MDN पर इस पर पहले से ही एक लेख मौजूद है । इस लेखन के समय, ब्राउज़र समर्थन खराब है।

मार्जिन-समाधान के बारे में: मेरे पास अंतराल के साथ एक फ्लेक्सबॉक्स ग्रिड है। flex-gapफ्लेक्सबॉक्स के साथ कोई संपत्ति (अभी तक?) नहीं है। इसलिए गटर के लिए, मैं पैडिंग और मार्जिन का उपयोग कर रहा हूं, इसलिए margin: autoअन्य मार्जिन को अधिलेखित करने की आवश्यकता है ...

Comments

अफसोस की बात है,In flexbox layouts, this property is ignored

— स्फिंक्सएक्स

@Sphinxxx हाँ, लेकिन एक कंटेनर में काम justify-self करता हैdisplay: grid । यह flexbox की तरह हाल ही में है, इसलिए जैसे समृद्ध स्थिति में सक्षम बनाता है align-items, align-selfऔर साथ ही एक तरह कुछ अतिरिक्त सुविधाएँ हम यहाँ जरूरत, justify-self। मेरी सलाह है कि जहां भी पर्याप्त हो, फ्लेक्सबॉक्स का उपयोग करें, लेकिन अगर इसमें कुछ कमी है, तो ग्रिड में सबसे अधिक संभावना है कि आप क्या देख रहे हैं। (उदाहरण के लिए, एक बच्चे को केंद्र-एक्स और केंद्र-वाई के लिए आसान संरेखित करना, और दूसरे से दाएं-x केंद्र-y - फ्लेक्सबॉक्स के margin-left: autoलिए आसान बाएं + दाएं, लेकिन केंद्र + दाएं नहीं) उदाहरण: stackoverflow.com/a/57128453 / 2441655

— वेनरिक्स

Answer 5

उन स्थितियों में, जहां आइटम आप कर की चौड़ाई के लिए flex-endजाना जाता है, आप के लिए "0 0 ## पिक्सल" उनके फ्लेक्स सेट और आइटम आप चाहते हैं निर्धारित कर सकते हैं flex-startके साथflex:1

यह flex-startकंटेनर को भरने के लिए छद्म आइटम का कारण होगा , बस इसे text-align:leftया जो भी प्रारूपित करना है ।

Answer 6

मैंने आंतरिक आइटम की शैली सेट करके एक समान मामला हल किया margin: 0 auto।
स्थिति: मेरे मेनू में आमतौर पर तीन बटन होते हैं, जिस स्थिति में उन्हें होना चाहिए justify-content: space-between। लेकिन जब एक ही बटन होगा, तो यह अब बाईं ओर केंद्र के साथ संरेखित होगा।