संरेखित-सामग्री और संरेखित-आइटम के बीच अंतर क्या है?

Question

क्या कोई मुझे align-itemsऔर के बीच का अंतर दिखा सकता है align-content?

Comments

संरेखित आइटम और संरेखित सामग्री

— jbutler483

मैंने पहले ही क्रिस के पंचांग की खुदाई कर दी थी, लेकिन फिर भी यह स्पष्ट नहीं हुआ

— दिन्ह

यहाँ पसंद के नाम इतने भ्रामक हैं! बस इतनी लापरवाह चीजों का नामकरण लगता है!

— vsync

stackoverflow.com/q/42613359/3597276

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

Answer 1

align-itemsफ्लेक्स-बॉक्स की संपत्ति क्रॉस अक्ष के साथ एक फ्लेक्स कंटेनर के अंदर वस्तुओं को संरेखित करती है जैसे justify-contentमुख्य अक्ष के साथ करती है। (डिफ़ॉल्ट के flex-direction: rowलिए क्रॉस अक्ष ऊर्ध्वाधर से मेल खाती है और मुख्य अक्ष क्षैतिज से मेल खाती है। flex-direction: columnउन दोनों को क्रमशः परस्पर जोड़ा जाता है)।

यहाँ एक उदाहरण है कि align-items:centerकैसा दिखता है:

लेकिन align-contentमल्टी लाइन लचीले बक्से के लिए है। जब आइटम एक ही पंक्ति में हों तो इसका कोई प्रभाव नहीं पड़ता है। यह अपने मूल्य के अनुसार पूरी संरचना को संरेखित करता है। यहाँ एक उदाहरण है align-content: space-around;:

और यहाँ तरीका बताया गया है align-content: space-around;के साथ align-items:centerदिखता है:

पहली पंक्ति में 3 बॉक्स और अन्य सभी बॉक्स को उस पंक्ति में लंबवत रूप से केंद्रित करें पर ध्यान दें।

यहाँ कुछ कोडपेन लिंक के साथ खेलने के लिए हैं:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

यहां एक सुपर कूल पेन दिखाया गया है जो आपको फ्लेक्सबॉक्स में लगभग हर चीज के साथ खेलने की सुविधा देता है।

Comments

ध्यान दें कि align-*गुण भी क्षैतिज रूप से फ्लेक्स आइटम को स्थानांतरित कर सकते हैं। यह पर निर्भर करता है flex-direction। stackoverflow.com/q/32551291/3597276

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

यह आसानी से सबसे अच्छा स्पष्टीकरण है। बाकी सभी लोग बुरी तरह से विफल हो जाते हैं।

— ortonomy

> "लेकिन संरेखित-सामग्री मल्टी लाइन लचीले बक्से के लिए है। इसका कोई प्रभाव नहीं पड़ता है जब आइटम एक ही पंक्ति में होते हैं" - यह नवीनतम फ़ायरफ़ॉक्स में (मई 2020) के लिए सच नहीं है, या सम्मानित नहीं किया जाना प्रतीत होता है। इसके बजाय, यदि कोई एकल फ्लेक्स-लाइन है (सभी सामग्री मुख्य-अक्ष लंबाई से कम के भीतर फिट होती है) जो पूरी ऊंचाई से कम है (क्रॉस-अक्ष का आकार पूर्ण उपलब्ध से कम है), तो संरेखित सामग्री यदि सेट संरेखित करेगा- आइटम नहीं है। यह समझ में आता है: यह किसी भी लाइनों पर लागू होता है जो इसे पाता है?

— एडम

Answer 2

मुझे उदाहरण http://flexboxfroggy.com/ बहुत उपयोगी लगता है।

इसमें आपको 10-20 मिनट लगेंगे और 21 के स्तर पर आपको अपने प्रश्न का उत्तर मिल जाएगा। यह उल्लेख किया:

संरेखित-सामग्री लाइनों के बीच रिक्ति को निर्धारित करती है, जबकि संरेखित-आइटम यह निर्धारित करती है कि कंटेनर के भीतर पूरी तरह से आइटम कैसे संरेखित हैं। जब केवल एक ही रेखा होती है, तो संरेखित-सामग्री का कोई प्रभाव नहीं होता है

Comments

वास्तव में, मैं मेंढक उदाहरण वास्तव में उपयोगी पाया। इससे बहुत कुछ सीखा।

— Spikatrix

Answer 3

सबसे पहले, align-itemsएक पंक्ति में आइटम के लिए है। तो मुख्य धुरी पर तत्वों की एक पंक्ति के लिए , align-itemsइन वस्तुओं को एक दूसरे से संबंधित संरेखित करेंगे और यह अगली पंक्ति से नए परिप्रेक्ष्य के साथ शुरू होगा।

अब, align-contentएक पंक्ति में आइटम के साथ हस्तक्षेप नहीं करता है , लेकिन पंक्तियों के साथ ही । इसलिये,align-content एक दूसरे और फ्लेक्स कंटेनर के संबंध में पंक्तियों को संरेखित करने का प्रयास करेंगे।

इस फिडेल की जाँच करें: https://jsfiddle.net/htym5zkn/8/

Answer 4

मुझे वही भ्रम था। उपरोक्त कई उत्तरों के आधार पर कुछ छेड़छाड़ के बाद, मैं अंत में मतभेद देख सकता हूं। मेरी विनम्र राय में, अंतर को सबसे अच्छे फ्लेक्स कंटेनर के साथ प्रदर्शित किया जाता है जो निम्नलिखित दो स्थितियों को संतुष्ट करता है:

1. फ्लेक्स कंटेनर में स्वयं एक ऊँचाई की बाधा होती है (जैसे min-height: 60rem) , और इस प्रकार यह बहुत लंबा हो सकता है इसकी सामग्री के लिए है
2. कंटेनर में संलग्न बच्चे की वस्तुओं में असमान ऊँचाई होती है

---

हालत 1 मुझे यह समझने में मदद करता है कि contentइसके मूल कंटेनर के सापेक्ष क्या मतलब है। जब सामग्री कंटेनर के साथ फ्लश होती है, तो हम किसी भी स्थिति से आने वाले प्रभाव को नहीं देख पाएंगे align-content। यह केवल तब होता है जब हमारे पास क्रॉस अक्ष के साथ अतिरिक्त स्थान होता है, हम इसका प्रभाव देखना शुरू करते हैं: यह मूल कंटेनर की सीमाओं के सापेक्ष सामग्री को संरेखित करता है।

शर्त 2 मुझे इसके प्रभावों की कल्पना करने में मदद करती है align-items: यह एक दूसरे के सापेक्ष वस्तुओं को संरेखित करता है।

---

यहाँ एक कोड उदाहरण है। वेस बोस सीएसएस ग्रिड ट्यूटोरियल (21. फ्लेक्सबॉक्स बनाम सीएसएस ग्रिड) से कच्चे माल आते हैं

• उदाहरण HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• उदाहरण सीएसएस:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

---

उदाहरण 1 : चलो व्यूपोर्ट को संकीर्ण करते हैं ताकि सामग्री कंटेनर के साथ फ्लश हो। यह तब होता है जब align-content: flex-start;पूरे कंटेंट ब्लॉक को कंटेनर के अंदर कसकर फिट करने के लिए कोई प्रभाव नहीं होता है (रिपोजिंग के लिए कोई अतिरिक्त कमरा नहीं!)

इसके अलावा, दूसरी पंक्ति पर ध्यान दें - देखें कि आइटम आपस में किस प्रकार केंद्र में हैं।

उदाहरण 2 : जैसा कि हमने व्यूपोर्ट को चौड़ा किया है, हमारे पास अब पूरे कंटेनर को भरने के लिए पर्याप्त सामग्री नहीं है। अब हम देखना शुरू करते हैं align-content: flex-start;- यह कंटेनर के ऊपरी किनारे के सापेक्ष सामग्री को संरेखित करता है।

---

ये उदाहरण flexbox पर आधारित हैं, लेकिन समान सिद्धांत CSS ग्रिड पर लागू होते हैं। उम्मीद है की यह मदद करेगा :)

Answer 5

वैसे मैंने अपने ब्राउजर पर उनकी जांच की है।

align-contentजब यह के मूल्य खिंचाव है स्तंभ के लिए पंक्ति दिशा या चौड़ाई के लिए एक लाइन की ऊंचाई को बदल सकते हैं, या के बीच या के लिए लाइनों के आसपास खाली जगह को जोड़ने space-between, space-around, flex-start, flex-end values।

align-itemsलाइन के क्षेत्र के अंदर आइटम की ऊँचाई या स्थिति बदल सकते हैं। जब आइटम लिपटे नहीं होते हैं, तो उनके पास केवल एक लाइन होती है, जिसका क्षेत्र हमेशा फ्लेक्स-बॉक्स क्षेत्र तक फैला होता है (भले ही आइटम अतिप्रवाह हो), और align-contentएक लाइन पर कोई प्रभाव नहीं पड़ता है। तो इसका उन वस्तुओं पर कोई प्रभाव नहीं है जो लिपटे हुए नहीं हैं और केवल align-itemsवस्तुओं की स्थिति को बदल सकते हैं या उन्हें तब खींच सकते हैं जब ये सभी एक ही रेखा पर हों।

हालांकि, अगर वे लिपटे हुए हैं तो आपके पास प्रत्येक पंक्ति के अंदर कई लाइनें और आइटम हैं। और यदि प्रत्येक पंक्ति की सभी वस्तुओं की ऊँचाई (पंक्ति की दिशा के लिए) समान है, तो उस पंक्ति की ऊँचाई उन वस्तुओं की ऊँचाई के बराबर होगी और आपको परिवर्तन करके कोई प्रभाव नहीं दिखाई देगाalign-items मूल्य ।

इसलिए यदि आप आइटम को align-itemsतब तक प्रभावित करना चाहते हैं जब आपके आइटम लपेटे जाते हैं और समान ऊंचाई (पंक्ति दिशा के लिए) पहले आपको align-contentलाइनों के क्षेत्र का विस्तार करने के लिए खिंचाव मूल्य के साथ उपयोग करना होगा।

Answer 6

संरेखित-सामग्री

align-contentक्रॉस-ऐक्सिस को नियंत्रित करता है (यानी यदि ऊर्ध्वाधर दिशा flex-directionहै row, और यदि क्षैतिज flex-directionहै column) तो कई की स्थिति दूसरे के सापेक्ष रेखाओं ।

(एक पैराग्राफ़ की पंक्तियों को लंबवत फैलाकर देखें, ऊपर की ओर तनी हुई, नीचे की ओर तनी हुई। यह एक flex-directionपंक्ति प्रतिमान के तहत है )।

संरेखित आइटम

align-items फ्लेक्स तत्वों की एक व्यक्तिगत रेखा के क्रॉस-अक्ष को नियंत्रित करता है।

(यह सोचें कि किसी अनुच्छेद की एक व्यक्तिगत रेखा कैसे संरेखित की जाती है, यदि उसमें कुछ सामान्य पाठ और गणित समीकरण जैसे कुछ लम्बे पाठ हों। उस स्थिति में, क्या यह एक पंक्ति में प्रत्येक प्रकार के पाठ के नीचे, ऊपर या ऊपर होगा। गठबंधन किया जाए;)

Answer 7

मैंने हर उत्तर से जो सीखा है और ब्लॉग पर जाना है

क्रॉस अक्ष और मुख्य अक्ष क्या है

• मुख्य अक्ष क्षैतिज पंक्ति है और क्रॉस अक्ष ऊर्ध्वाधर स्तंभ है - के लिए flex-direction: row
• मुख्य अक्ष ऊर्ध्वाधर स्तंभ है और क्रॉस अक्ष क्षैतिज पंक्ति है - के लिए flex-direction: column

अब संरेखित करें सामग्री और संरेखित आइटम

संरेखित सामग्री पंक्ति के लिए है, यह काम करता है यदि कंटेनर में (एक पंक्ति से अधिक) संरेखित सामग्री के गुण हैं

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

संरेखित-आइटम पंक्ति की वस्तुओं के लिए है

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

अधिक संदर्भ के लिए फ्लेक्स पर जाएँ

Answer 8

मुख्य अंतर तब होता है जब तत्वों की ऊंचाई समान नहीं होती है! फिर आप देख सकते हैं कि कैसे पंक्ति में, वे सभी केंद्र \ end \ start हैं

Answer 9

यहाँ से जो मुझे समझ आया उसके अनुसार :

जब आप संरेखित-आइटम या औचित्य-आइटम का उपयोग करते हैं, तो आप क्रमशः स्तंभ अक्ष या पंक्ति अक्ष के साथ एक ग्रिड आइटम के अंदर सामग्री को समायोजित कर रहे हैं।

लेकिन: यदि आप संरेखण-सामग्री या औचित्य-सामग्री का उपयोग करते हैं, तो आप स्थिति को स्तंभ अक्ष या पंक्ति अक्ष के साथ ग्रिड सेट कर रहे हैं। यह तब होता है जब आपके पास एक बड़े कंटेनर में एक ग्रिड होता है और चौड़ाई या ऊंचाई अनम्य होती है (px का उपयोग करके)।