कंटेनर के अंत में स्थिति अंतिम फ्लेक्स आइटम

Question

यह प्रश्न फ्लेक्सबॉक्स सहित पूर्ण css3 समर्थन वाले ब्राउज़र की चिंता करता है।

मेरे पास एक फ्लेक्स कंटेनर है जिसमें कुछ आइटम हैं। वे सभी फ्लेक्स-स्टार्ट के लिए उचित हैं लेकिन मैं चाहता हूं कि अंतिम .end आइटम को फ्लेक्स-एंड के लिए उचित ठहराया जाए। क्या HTML को संशोधित किए बिना और पूर्ण स्थिति का सहारा लिए बिना ऐसा करने का एक अच्छा तरीका है?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Comments

हाँ। autoयहाँ मार्जिन चित्र देखें : stackoverflow.com/a/33856609/3597276

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

फ्लेक्सबॉक्स के साथ नीचे करने के लिए एक तत्व को संरेखित करना

— mfluehr

Answer 1

लचीला बॉक्स लेआउट मॉड्यूल - 8.1। ऑटो मार्जिन के साथ संरेखित करना

फ्लेक्स आइटम पर ऑटो मार्जिन का प्रभाव ब्लॉक प्रवाह में ऑटो मार्जिन के समान है:

• फ्लेक्स बेस और लचीली लंबाई की गणना के दौरान, ऑटो मार्जिन को 0 माना जाता है।

• के माध्यम से संरेखण से पहले justify-contentऔर align-self, किसी भी सकारात्मक मुक्त स्थान को उस आयाम में ऑटो मार्जिन के लिए वितरित किया जाता है।

इसलिए आप margin-top: autoअन्य तत्वों और अंतिम तत्व के बीच के स्थान को वितरित करने के लिए उपयोग कर सकते हैं ।

यह आखिरी तत्व को सबसे नीचे रखेगा।

p:last-of-type {
  margin-top: auto;
}

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

---

इसी तरह, आप क्षैतिज रूप से margin-left: autoया margin-right: autoउसी संरेखण के लिए भी उपयोग कर सकते हैं ।

p:last-of-type {
  margin-left: auto;
}

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Comments

सही, विश्वास नहीं होता कि मैं चूक गया! विशेष रूप से शर्मनाक जब से मैं पूरी तरह से प्रयोग करने वाले मार्जिन-ऑटो-टू-सेंटर-ट्रिक के बारे में जानता हूं और हर समय इसका उपयोग करता हूं

— जॉर्ज मौवर

@ j08691 मेरे पास औपचारिक स्पष्टीकरण नहीं है कि यह क्यों काम करता है, लेकिन यह उसी तरह है जैसे आप margin: 0 autoक्षैतिज केंद्र के लिए कैसे उपयोग कर सकते हैं । फ्लेक्सबॉक्स आइटम मार्जिन का सम्मान करते हैं, और मेरा मानना ​​है कि margin: autoआवश्यक रूप से आइटम को यथासंभव सिबलिंग के बीच की जगह के साथ स्थान देगा। देखें: w3.org/TR/css-flexbox-1/#auto-margins

— जोश

@ jo8691 यदि मैं गलत नहीं हूँ, तो margin: autoएक फ्लेक्स आइटम पर यह उस दिशा में जितना संभव हो उतना स्थान बनाने के लिए कहता है।

— जॉर्ज माउर

युक्ति कहती है Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

— जॉर्ज माउर

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

— j08691

Answer 2

यह फ्लेक्सबॉक्स सिद्धांत भी क्षैतिज रूप से काम करता है

फ्लेक्स बेस और लचीली लंबाई की गणना के दौरान, ऑटो मार्जिन को 0.
औचित्य-सामग्री और संरेखित-स्व के माध्यम से संरेखण करने के लिए पूर्व के रूप में माना जाता है , किसी भी सकारात्मक मुक्त स्थान को उस आयाम में ऑटो मार्जिन के लिए वितरित किया जाता है।

अंतिम आइटम के लिए एक स्वचालित बाएं मार्जिन सेट करना काम करेगा।

.last-item {
  margin-left: auto;
}

कोड उदाहरण:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

कोडपेन स्निपेट

यह डेस्कटॉप पाद के लिए बहुत उपयोगी हो सकता है।

जैसा कि एनवाटो ने कंपनी के लोगो के साथ यहां किया था।

कोडपेन स्निपेट

Comments

यह पता चलता है कि यह वास्तव में क्यों काम करता है, लेकिन इसने मुझे एक परियोजना में मदद की।

— लुईस 345

क्या होगा अगर मुझे जरूरत है कि सभी वस्तुएं केंद्र में होंगी और दाईं ओर अंतिम एक होगी?

— इलोरियन