CSS Flexbox में, "औचित्य-आइटम" और "औचित्य-स्व" गुण क्यों नहीं हैं?

Question

एक फ्लेक्स कंटेनर के मुख्य अक्ष और क्रॉस एक्सिस पर विचार करें:

                                                                                                                                                   _{स्रोत: W3C}

मुख्य संपत्ति के साथ फ्लेक्स आइटम संरेखित करने के लिए एक संपत्ति है:

• justify-content

क्रॉस अक्ष के साथ फ्लेक्स आइटम को संरेखित करने के लिए तीन गुण हैं:

• align-content
• align-items
• align-self

ऊपर की छवि में, मुख्य अक्ष क्षैतिज है और क्रॉस अक्ष ऊर्ध्वाधर है। ये एक फ्लेक्स कंटेनर के डिफ़ॉल्ट निर्देश हैं।

हालांकि, इन दिशाओं को आसानी से flex-directionसंपत्ति के साथ बदला जा सकता है ।

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(क्रॉस अक्ष हमेशा मुख्य अक्ष के लंबवत होता है।)

कुल्हाड़ी का काम कैसे होता है, यह बताने में मेरी बात यह है कि दिशा के बारे में कुछ भी विशेष नहीं लगता है। मुख्य अक्ष, क्रॉस अक्ष, वे दोनों महत्व के संदर्भ में समान हैं flex-directionऔर आगे और पीछे स्विच करना आसान बनाता है।

तो क्रॉस एक्सिस को दो अतिरिक्त संरेखण गुण क्यों मिलते हैं?

क्यों कर रहे हैं align-contentऔर align-itemsमुख्य धुरी के लिए एक संपत्ति में समेकित?

मुख्य अक्ष को एक justify-selfसंपत्ति क्यों नहीं मिलती है ?

---

परिदृश्य जहां ये गुण उपयोगी होंगे:

• फ्लेक्स कंटेनर के कोने में एक फ्लेक्स आइटम रखें
  #box3 { align-self: flex-end; justify-self: flex-end; }

• फ्लेक्स आइटमों के एक समूह को संरेखित-दाएं बनाना ( justify-content: flex-end) लेकिन पहले आइटम को संरेखित करना छोड़ दिया है ( justify-self: flex-start)

  एक नेवड आइटम और लोगो के समूह के साथ हेडर अनुभाग पर विचार करें। justify-selfलोगो के साथ बाईं ओर संरेखित किया जा सकता है, जबकि नव-वस्तुएं सही बनी रहती हैं, और पूरी चीज़ आसानी से ("फ्लेक्स") अलग-अलग स्क्रीन आकारों में समायोजित हो जाती है।

• तीन फ्लेक्स आइटमों की एक पंक्ति में, मध्य वस्तु को कंटेनर के केंद्र पर चिपकाएँ ( justify-content: center) और आसन्न वस्तुओं को कंटेनर किनारों ( justify-self: flex-startऔर justify-self: flex-end) में संरेखित करें ।

  ध्यान दें कि आस-पास की वस्तुओं की चौड़ाई अलग-अलग होने पर मान space-aroundऔर संपत्ति space-betweenपर justify-contentकंटेनर के बारे में मध्य वस्तु को केंद्रित नहीं रखेंगे।

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

jsFiddle संस्करण

---

इस लेखन के रूप में, फ्लेक्सबॉक्स युक्ति में justify-selfया इसका कोई उल्लेख नहीं है ।justify-items

हालांकि, CSS बॉक्स संरेखण मॉड्यूल में , जो सभी बॉक्स मॉडल में उपयोग के लिए संरेखण गुणों का एक सामान्य सेट स्थापित करने के लिए W3C का अधूरा प्रस्ताव है, यह है:

                                                                                                                                                   _{स्रोत: W3C}

आप देखेंगे कि justify-selfऔर justify-itemsमाना जा रहा है ... लेकिन फ्लेक्सबॉक्स के लिए नहीं ।

---

मैं मुख्य प्रश्न को दोहराकर समाप्त करूंगा:

कोई "औचित्य-मद" और "औचित्य-स्व" गुण क्यों नहीं हैं?

Comments

आप justify-selfएक फ्लेक्स आइटम के लिए कैसे काम करने की उम्मीद करेंगे ? मान लें कि आपके पास उनके चारों ओर वितरित करने के लिए अतिरिक्त जगह के साथ एक, बी, सी, डी हैं, और फ्लेक्स कंटेनर है justify-content: space-between, इसलिए अंत में जैसे | abcd | इसे जोड़ने का क्या मतलब होगा जैसे justify-self: center'या' औचित्य-स्व: फ्लेक्स-एंड `सिर्फ आइटम 'बी' के लिए? आप कहाँ जाने की उम्मीद करेंगे? (मुझे यहां एक उत्तर में कुछ डेमो दिखाई देते हैं, लेकिन मुझे यह स्पष्ट रूप से नहीं दिखता है कि यह सामान्य रूप से काम करेगा।)

— ढोलबर्ट

(वैकल्पिक रूप से: मान लें कि हमारे पास है justify-content: flex-start, इसलिए आइटमों की शुरुआत में भीड़ होती है जैसे | abcd | | आप इसे करने के लिए क्या उम्मीद करेंगे, अगर आप justify-self: [anything]आइटम 'b' पर रखते हैं?)

— dholbert

@ ढोलबर्ट, आपने लिखा है: आप justify-selfएक फ्लेक्स आइटम के लिए कैसे काम करने की उम्मीद करेंगे ? मैं कहूंगा कि autoपहले से ही फ्लेक्स आइटम पर काम करने वाले मार्जिन से अलग नहीं । आपके दूसरे उदाहरण में, justify-self: flex-endआइटम d पर इसे दूर के किनारे पर ले जाया जाएगा। यह अपने आप में एक बड़ी विशेषता होगी, जो autoमार्जिन पहले से ही कर सकता है। मैंने एक प्रदर्शन के साथ एक उत्तर पोस्ट किया।

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

मैं ज्यादातर यहाँ अधिक उपयोग के मामलों को देख रहा हूँ, और उपयोग के मामले बहुत अच्छे हैं - लेकिन मुश्किल सा यह है कि इसे वास्तविक तरीके से कैसे बढ़ाया जाए justify-contentऔर justify-selfइसे निर्दिष्ट किया जाए, ताकि संघर्ष के साथ मामले (जैसे कि परिदृश्यों के बारे में मैंने पूछा) स्पष्ट रूप से और समझदारी से परिभाषित किया गया है। जैसा कि मैंने अपने उत्तर में यहां दिया है, एक बड़े बॉक्स के भीतर{justify|align}-self आइटम संरेखित करने के बारे में हैं , जो {justify|align}-selfमूल्य से स्वतंत्र रूप से आकार में है - और मुख्य धुरी में ऐसा कोई बॉक्स नहीं है, जिसमें फ्लेक्स आइटम को संरेखित किया जाए।

— ढोलबर्ट

आरई "ऑटो मार्जिन से अलग नहीं" - मैं वास्तव में पूछ रहा था कि आप कैसे कल्पना करते हैं justify-selfऔर justify-contentबातचीत करेंगे, ऐसे मामलों में जहां वे संघर्ष करते हैं (जैसे कि मैंने जो परिदृश्य बिछाए हैं)। ऑटो मार्जिन बस के साथ बातचीत नहीं करते हैं justify-content- वे justify-contentउपयोग करने का मौका मिलने से पहले पैकिंग की सभी जगह चुरा लेते हैं । इसलिए, ऑटो मार्जिन वास्तव में एक अच्छा एनालॉग नहीं है कि यह कैसे काम करेगा।

— ढोलबर्ट

Answer 1

मुख्य अक्ष के साथ फ्लेक्स आइटम को संरेखित करने के तरीके

जैसा कि प्रश्न में कहा गया है:

मुख्य संपत्ति के साथ फ्लेक्स आइटम संरेखित करने के लिए एक संपत्ति है: justify-content

पार अक्ष के साथ संरेखित फ्लेक्स आइटम करने के लिए तीन गुण देखते हैं: align-content, align-itemsऔरalign-self ।

सवाल तो पूछता है:

कोई justify-itemsऔर justify-selfगुण क्यों नहीं हैं?

एक उत्तर हो सकता है: क्योंकि वे आवश्यक नहीं हैं।

Flexbox विनिर्देश प्रदान करता है दो मुख्य धुरी के साथ फ्लेक्स आइटम संरेखित करने के लिए तरीके:

1. justify-contentकीवर्ड संपत्ति, और
2. auto मार्जिन

---

दोनों ओर संरेखित-सामग्री

justify-contentसंपत्ति संरेखित फ्लेक्स कंटेनर के मुख्य धुरी के साथ आइटम फ्लेक्स।

यह फ्लेक्स कंटेनर पर लागू होता है लेकिन केवल फ्लेक्स आइटम को प्रभावित करता है।

पाँच संरेखण विकल्प हैं:

• flex-start ~ फ्लेक्स आइटम लाइन की शुरुआत में पैक किए जाते हैं।

  

• flex-end ~ फ्लेक्स आइटम लाइन के अंत में पैक किए जाते हैं।

  

• center ~ फ्लेक्स आइटम लाइन के केंद्र की ओर पैक किए जाते हैं।

  

• space-between~ फ्लेक्स आइटम समान रूप से दूरी पर होते हैं, पहला आइटम कंटेनर के एक किनारे से जुड़ा होता है और अंतिम आइटम विपरीत किनारे से जुड़ा होता है। पहले और आखिरी आइटम द्वारा उपयोग किए जाने वाले किनारों पर निर्भर करता है flex-directionऔर लेखन मोड ( ltrया rtl)।

  

• space-around~ space-betweenदोनों सिरों पर आधे आकार के रिक्त स्थान को छोड़कर।

  

---

ऑटो मार्जिन

autoमार्जिन के साथ , फ्लेक्स आइटम को केंद्रित, दूर रखा या उप-समूहों में पैक किया जा सकता है।

इसके विपरीत justify-content, जो फ्लेक्स कंटेनर पर लागू होता है, autoमार्जिन फ्लेक्स आइटम पर जाते हैं।

वे निर्दिष्ट दिशा में सभी खाली स्थान का उपभोग करके काम करते हैं।

---

फ्लेक्स आइटम के समूह को दाईं ओर संरेखित करें, लेकिन पहले आइटम बाईं ओर

प्रश्न से परिदृश्य:

• फ्लेक्स आइटमों के एक समूह को संरेखित-दाएं बनाना ( justify-content: flex-end) लेकिन पहले आइटम को संरेखित करना छोड़ दिया है ( justify-self: flex-start)

  एक नेवड आइटम और लोगो के समूह के साथ हेडर अनुभाग पर विचार करें। justify-selfलोगो के साथ बाईं ओर संरेखित किया जा सकता है, जबकि नव-वस्तुएं सही बनी रहती हैं, और पूरी चीज़ आसानी से ("फ्लेक्स") अलग-अलग स्क्रीन आकारों में समायोजित हो जाती है।

---

अन्य उपयोगी परिदृश्य:

---

कोने में एक फ्लेक्स आइटम रखें

प्रश्न से परिदृश्य:

• एक कोने में एक फ्लेक्स आइटम रखकर .box { align-self: flex-end; justify-self: flex-end; }

---

एक फ्लेक्स आइटम को लंबवत और क्षैतिज रूप से केंद्रित करें

margin: autoके लिए एक विकल्प है justify-content: centerऔर align-items: center।

फ्लेक्स कंटेनर पर इस कोड के बजाय:

.container {
    justify-content: center;
    align-items: center;
}

आप फ्लेक्स आइटम पर इसका उपयोग कर सकते हैं:

.box56 {
    margin: auto;
}

कंटेनर को ओवरफ्लो करने वाले एक फ्लेक्स आइटम को केंद्रित करते समय यह विकल्प उपयोगी होता है ।

---

एक फ्लेक्स आइटम को केंद्र में रखें, और पहले और किनारे के बीच एक दूसरे फ्लेक्स आइटम को केंद्र में रखें

एक फ्लेक्स कंटेनर मुक्त स्थान वितरित करके फ्लेक्स आइटम संरेखित करता है।

इसलिए, एक समान संतुलन बनाने के लिए , ताकि कंटेनर में एक एकल वस्तु के साथ एक मध्य वस्तु को केंद्रित किया जा सके, एक असंतुलन पेश किया जाना चाहिए।

नीचे दिए गए उदाहरणों में, अदृश्य तीसरे फ्लेक्स आइटम (बॉक्स 61 और 68) "वास्तविक" आइटम (बॉक्स 63 और 66) को संतुलित करने के लिए पेश किए गए हैं।

बेशक, यह विधि शब्दार्थ के संदर्भ में कुछ भी महान नहीं है।

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

ध्यान दें: ऊपर दिए गए उदाहरण केवल काम करेंगे - सच्चे केंद्र के संदर्भ में - जब बाहरी वस्तुएं समान ऊंचाई / चौड़ाई हैं। जब फ्लेक्स आइटम अलग-अलग लंबाई के होते हैं, तो अगला उदाहरण देखें।

---

आसन्न आइटम आकार में भिन्न होने पर एक फ्लेक्स आइटम को केंद्र में रखें

प्रश्न से परिदृश्य:

• तीन फ्लेक्स आइटमों की एक पंक्ति में, मध्य वस्तु को कंटेनर के केंद्र पर चिपकाएँ ( justify-content: center) और आसन्न वस्तुओं को कंटेनर किनारों ( justify-self: flex-startऔर justify-self: flex-end) में संरेखित करें ।

  ध्यान दें कि मूल्य space-aroundऔर संपत्ति space-betweenपर justify-contentकंटेनर के संबंध में मध्य वस्तु को केंद्रित नहीं रखा जाएगा यदि आसन्न वस्तुओं में अलग-अलग चौड़ाई ( डेमो देखें )।

जैसा कि कहा गया है, जब तक कि सभी फ्लेक्स आइटम समान चौड़ाई या ऊँचाई (निर्भर न हों flex-direction) नहीं होते, तब तक मध्य आइटम वास्तव में केंद्रित नहीं हो सकते। यह समस्या justify-selfसंपत्ति के लिए एक मजबूत मामला बनाती है (कार्य को संभालने के लिए डिज़ाइन किया गया है, बिल्कुल)।

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

इस समस्या को हल करने के दो तरीके इस प्रकार हैं:

समाधान # 1: पूर्ण स्थिति

Flexbox कल्पना फ्लेक्स आइटम की पूर्ण स्थिति के लिए अनुमति देता है । यह मध्य आइटम को अपने भाई-बहनों के आकार की परवाह किए बिना पूरी तरह से केंद्रित करने की अनुमति देता है।

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

नीचे दिए गए उदाहरणों में, मध्य वस्तु पूर्ण स्थिति के साथ केंद्रित है और बाहरी वस्तुएं प्रवाह में बनी हुई हैं। लेकिन एक ही लेआउट को रिवर्स फैशन में प्राप्त किया जा सकता है: मध्य आइटम को केंद्र में रखें justify-content: centerऔर बाहरी वस्तुओं को बिल्कुल स्थिति दें।

समाधान # 2: नेस्टेड फ्लेक्स कंटेनर (कोई पूर्ण स्थिति नहीं)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

यहां देखिए यह कैसे काम करता है:

• शीर्ष-स्तरीय div ( .container) एक फ्लेक्स कंटेनर है।
• प्रत्येक बाल div ( .box) अब एक फ्लेक्स आइटम है।
• प्रत्येक .boxआइटम को flex: 1कंटेनर स्पेस को समान रूप से वितरित करने के लिए दिया जाता है।
• अब आइटम पंक्ति में सभी स्थान का उपभोग कर रहे हैं और समान चौड़ाई के हैं।
• प्रत्येक आइटम को (नेस्टेड) ​​फ्लेक्स कंटेनर बनाएं और जोड़ें justify-content: center।
• अब प्रत्येक spanतत्व एक केंद्रित फ्लेक्स आइटम है।
• autoबाहरी spanएस को बाएँ और दाएँ स्थानांतरित करने के लिए फ्लेक्स मार्जिन का उपयोग करें ।

आप विशेष रूप से मार्जिन को त्याग justify-contentऔर उपयोग कर सकते हैं auto।

लेकिन justify-contentयहां काम कर सकते हैं क्योंकि autoमार्जिन में हमेशा प्राथमिकता होती है। कल्पना से:

8.1। auto मार्जिन के साथ संरेखित करना

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

---

औचित्य-सामग्री: अंतरिक्ष-समान (अवधारणा)

justify-contentएक मिनट के लिए वापस जा रहे हैं , यहाँ एक और विकल्प के लिए एक विचार है।

• space-same~ का एक संकर space-betweenऔर space-around। फ्लेक्स आइटम समान रूप से (जैसे space-between), दोनों सिरों (जैसे space-around) पर आधे आकार के रिक्त स्थान को छोड़कर, दोनों सिरों पर पूर्ण आकार के स्थान होते हैं।

इस लेआउट के साथ प्राप्त किया जा सकता ::beforeहै और ::afterफ्लेक्स कंटेनर पर छद्म तत्वों।

^{(क्रेडिट: @oriol कोड के लिए, और @crl लेबल के लिए)}

अद्यतन: ब्राउज़रों ने लागू करना शुरू कर दिया है space-evenly, जो उपरोक्त को पूरा करता है। विवरण के लिए इस पोस्ट को देखें: फ्लेक्स आइटम के बीच समान स्थान

---

PLAYGROUND (उपरोक्त सभी उदाहरणों के लिए कोड शामिल है)

Comments

जवाब कवर के ऊपर मुख्य अक्ष , justify-contentऔर autoमार्जिन। सिक्के का दूसरा पहलू के लिए - पार अक्ष , align-items, align-selfऔर align-content: - इस पोस्ट को देख stackoverflow.com/q/42613359/3597276

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

@MarkW, आप justify-selfसंपत्ति के लिए मामला बना रहे हैं ... autoमार्जिन सहायक हैं, लेकिन justify-self: centerआदर्श होगा। आपके द्वारा प्रस्तुत की गई समस्या को हल करने का तरीका विपरीत तरफ अदृश्य डुप्लिकेट आइटम बनाना होगा। मेरा जवाब यहाँ देखें: stackoverflow.com/q/38948102/3597276

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

आपकी space-sameअवधारणा अब एक वास्तविक चीज है। इसे कहा जाता है space-evenly, लेकिन यह इस समय केवल फ़ायरफ़ॉक्स द्वारा समर्थित है: developer.mozilla.org/en-US/docs/Web/CSS/justify-content

— benface

@ शेनफेस, हां, आप सही कह रहे हैं। यह बात बताने के लिए धन्यवाद। मैं वास्तव space-evenlyमें अन्य उत्तरों के बारे में लिख रहा हूं : stackoverflow.com/q/45134400/3597276

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

वास्तव में, क्रोम 57-60 में समर्थित space-evenly था , लेकिन केवल ग्रिड लेआउट के लिए। यह एक बग था जिसे ठीक कर दिया गया है, और क्रोम 61 के बाद से यह फ्लेक्सबॉक्स के लिए भी समर्थित है। इसके अलावा, छद्म तत्वों के बिना इसका अनुकरण करने का तरीका है .item { margin-right: auto } .item:first-child { margin-left: auto }:।

— इल्या स्ट्रेल्ट्सिन

Answer 2

मुझे पता है कि यह कोई जवाब नहीं है, लेकिन मैं इस मामले में योगदान करना चाहूंगा कि यह क्या है। यह बहुत अच्छा होगा अगर वे justify-selfफ्लेक्सबॉक्स के लिए इसे वास्तव में लचीला बनाने के लिए जारी कर सकते हैं ।

यह मेरा विश्वास है कि जब अक्ष पर कई आइटम होते हैं, तो justify-selfव्यवहार करने का सबसे तार्किक तरीका नीचे दिखाए गए अनुसार अपने निकटतम पड़ोसियों (या किनारे) के लिए खुद को संरेखित करना है।

मुझे सच में उम्मीद है, W3C इस पर ध्यान देगा और कम से कम इस पर विचार करेगा। =)

इस तरह से आपके पास एक ऐसा आइटम हो सकता है जो वास्तव में बाएं और दाएं बॉक्स के आकार की परवाह किए बिना केंद्रित है। जब कोई एक बॉक्स केंद्र के बिंदु तक पहुंचता है, तो यह बस इसे तब तक धक्का देगा जब तक कि वितरित करने के लिए अधिक जगह न हो।

भयानक लेआउट बनाने की आसानी अंतहीन हैं, इस "जटिल" उदाहरण पर एक नज़र डालें।

Comments

@ मर्क यह अद्भुत है! इस ड्राफ्ट के लिए समय निकालने के लिए धन्यवाद। मुझे आशा है कि आपको कोई आपत्ति नहीं है, लेकिन मैंने इसे यहाँ प्रस्तुत किया है: प्रवचन

— ।wicg.io

@Zaxx यकीन है, और अधिक जोखिम बेहतर है। गंभीर रूप से आशा है कि वे इस वास्तविकता को बनाने का एक तरीका पाएंगे, इस पर मेरे हाथ गंदे करना पसंद करेंगे।

— मार्क

हाय मार्क, @Zaxx, मैंने एक उत्तर पोस्ट किया है जो इस उत्तर में वर्णित कुछ उपयोग-मामलों को कवर कर सकता है। मुझे पता चला है कि अभी भी मुख्य धुरी में बिना जरूरत के justify-selfऔर बहुत कुछ किया जा सकता है justify-items।

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

@Michael_B खुशी है कि आप flexbox के बारे में अधिक जान रहे हैं और इस बात की सराहना करते हैं कि आपने अपने नोट्स को एक उत्तर में प्रारूपित करने में समय लिया। मार्जिन: ऑटो वास्तव में अच्छा है (हालांकि आप ब्राउज़रों को पाएंगे जो फ्लेक्सबॉक्स कल्पना के 2009 और 2012 संस्करणों को लागू करते हैं, इसमें कोई समान विशेषता नहीं है जो उत्पादन साइट पर इसका उपयोग करने की क्षमता को काफी कम कर देता है)। हालांकि, यहां तक ​​कि उन ब्राउज़रों के साथ भी जो मार्जिन का समर्थन करते हैं: ऑटो, मुख्य उपयोग मामला यहां एक वस्तु का है जो इसके कंटेनर के सापेक्ष केंद्रित है जबकि अंतरिक्ष मौजूद है अभी भी औचित्य-स्व संपत्ति या इसी तरह के बिना असंभव है।

— ज़ाक्ज़ नोव

@Zaxx, प्रतिक्रिया के लिए धन्यवाद। और हाँ, मैं आपसे सहमत हूँ, autoमार्जिन एक पूर्ण विकल्प नहीं है justify-self। मैं अपनी पिछली टिप्पणी को कहने के लिए सावधान था कि autoमार्जिन कुछ उपयोग-मामलों को कवर करेगा । जैसा कि आपने उल्लेख किया है, यह उस स्थान पर किसी वस्तु को केंद्र में नहीं रख सकता है जब आसन्न वस्तुएं विभिन्न आकारों की हों। हालांकि, यह फ्लेक्स आइटम को संरेखित करने के लिए अधिक विकल्प प्रदान करता है। जब मैंने पहली बार फ्लेक्सबॉक्स के बारे में सीखना शुरू किया तो मुझे लगा कि justify-contentअदृश्य स्पेसर आइटम ही एकमात्र रास्ता है।

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

Answer 3

यह www- शैली की सूची में पूछा गया था, और टैब एटकिंस (युक्ति संपादक) ने एक उत्तर दिया कि क्यों । मैं यहाँ उस पर थोड़ा विस्तार करूँगा।

शुरू करने के लिए, आइए शुरू में मान लें कि हमारा फ्लेक्स कंटेनर सिंगल-लाइन ( flex-wrap: nowrap) है। इस स्थिति में, मुख्य अक्ष और क्रॉस अक्ष के बीच स्पष्ट रूप से एक संरेखण अंतर होता है - मुख्य अक्ष में ढेर किए गए कई आइटम होते हैं, लेकिन क्रॉस अक्ष में केवल एक आइटम स्टैक्ड होता है। तो यह क्रॉस अक्ष में एक कस्टमाइज़ेबल-प्रति-आइटम "संरेखित-स्व" होने के लिए समझ में आता है (क्योंकि प्रत्येक आइटम को अलग से, अपने दम पर संरेखित किया जाता है), जबकि यह मुख्य अक्ष में समझ में नहीं आता है (वहां से,) आइटम सामूहिक रूप से संरेखित होते हैं)।

मल्टी-लाइन फ्लेक्सबॉक्स के लिए, प्रत्येक "फ्लेक्स लाइन" पर एक ही तर्क लागू होता है। किसी दिए गए पंक्ति में, आइटम क्रॉस अक्ष में व्यक्तिगत रूप से संरेखित किए जाते हैं (चूंकि प्रति पंक्ति में केवल एक आइटम है, क्रॉस अक्ष में), बनाम सामूहिक रूप से मुख्य अक्ष में।

---

हां,: यहाँ यह phrasing का एक और तरीका है सब की *-selfऔर *-contentगुण कैसे चीजें चारों ओर अतिरिक्त स्थान को वितरित करने के बारे में हैं। लेकिन महत्वपूर्ण अंतर यह है कि *-selfसंस्करण उन मामलों के लिए होते हैं जहां उस अक्ष में केवल एक ही चीज होती है , और *-contentसंस्करण तब होते हैं जब उस अक्ष में संभावित रूप से कई चीजें होती हैं । एक-चीज़ बनाम कई-चीजों के परिदृश्य विभिन्न प्रकार की समस्याएं हैं, और इसलिए उनके पास विभिन्न प्रकार के विकल्प उपलब्ध हैं - उदाहरण के लिए, space-around/ space-betweenमान के लिए समझ में आता है *-content, लेकिन नहीं *-self।

SO: एक फ्लेक्सबॉक्स की मुख्य धुरी में, अंतरिक्ष को वितरित करने के लिए कई चीजें हैं। तो एक *-contentसंपत्ति वहाँ समझ में आता है, लेकिन एक *-selfसंपत्ति नहीं है ।

इसके विपरीत, क्रॉस अक्ष में, हमारे पास संपत्ति *-selfऔर *-contentसंपत्ति दोनों हैं। एक निर्धारित करता है कि हम कई फ्लेक्स लाइनों ( align-content) के चारों ओर अंतरिक्ष कैसे वितरित करेंगे , जबकि अन्य ( align-self) यह निर्धारित करता है कि किसी दिए गए फ्लेक्स लाइन के भीतर क्रॉस फ्लेक्स में व्यक्तिगत फ्लेक्स आइटमों के आसपास स्थान कैसे वितरित किया जाए ।

(मैं *-itemsयहाँ गुणों की अनदेखी कर रहा हूँ , क्योंकि वे बस के लिए चूक स्थापित करते हैं *-self।)

Comments

मैं समझता हूं कि एक justify-selfआइटम के विपरीत कई वस्तुओं के साथ अक्ष पर कोई समस्या कैसे हो सकती है। हालाँकि मैं वास्तव में आशा करता हूं कि वे इसे और आगे देखेंगे, कई मदों की स्थिति में यह कैसा justify-selfव्यवहार करेगा , क्योंकि कुछ स्थितियां ऐसी हैं जहां यह वास्तव में उपयोगी हो सकता है। उदाहरण के लिए ( stackoverflow.com/questions/32378953/… )।

— मार्क

उस मेलिंग सूची पर अच्छा लगा। अपने सिर को इसके चारों ओर लपेटने की कोशिश कर रहा हूं, क्योंकि मुझे अभी भी इसके लिए उपयोग की अच्छी संभावनाएं दिखती हैं justify-self।

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

मैंने थोड़ा और स्पष्टीकरण दिया, यह बताते हुए कि कैसे *-selfमामलों के बारे में है जहां हमारे पास केवल एक चीज है जो संरेखित करना है जबकि *-contentउन मामलों के बारे में है जहां हमारे पास संरेखित करने के लिए कई चीजें हैं। क्या यह इसे थोड़ा स्पष्ट करता है?

— ढोलबर्ट

हां, यह अधिक स्पष्ट है। मैं स्पष्टीकरण की सराहना करता हूं। लेकिन यह सभी को लगता है कि तर्क लेखकों पर आधारित एक विशेष आवश्यकता के लिए, विशेष लेखकों द्वारा उकसाया जाता है। आपके द्वारा संदर्भित मेलिंग सूची से : *-स्वयं के गुण केवल तभी काम करते हैं यदि बच्चा उस धुरी में अकेला हो। क्यों? इसके लिए कोई आवश्यकता प्रतीत नहीं होती है। यह एक मनमाना फैसला है। एक प्राथमिकता। वास्तव में, autoमार्जिन, भी कल्पना का हिस्सा है, लाइन में कई वस्तुओं के साथ * -अलाइन संरेखण को सक्षम करें। कोई भी स्पष्ट कारण क्यों कीवर्ड गुण नहीं कर सकते हैं।

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

Answer 4

मुझे पता है कि यह फ्लेक्सबॉक्स का उपयोग नहीं करता है, लेकिन तीन वस्तुओं के सरल उपयोग-मामले के लिए (एक बाईं ओर, एक केंद्र में, एक दाएं पर), यह display: gridमाता-पिता, grid-area: 1/1/1/1;बच्चों पर और justify-selfस्थिति के लिए आसानी से पूरा किया जा सकता है उन बच्चों की।

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Comments

उत्तर के लिए धन्यवाद, लेकिन यह वास्तव में प्रश्न को संबोधित नहीं करता है। इसके अलावा, अपने लेआउट को पूरा करने का एक सरल तरीका है: jsfiddle.net/fga89m2o

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

Answer 5

मुझे इस समस्या का केवल अपना ही हल मिला, या कम से कम मेरी समस्या का।
मैं justify-content: space-aroundइसके बजाय उपयोग कर रहा था justify-content: space-between;।

इस तरह अंतिम तत्व ऊपर और नीचे चिपक जाएंगे, और यदि आप चाहते हैं तो आपके पास कस्टम मार्जिन हो सकता है।