क्या फ्लेक्सबॉक्स के साथ 'स्थिति: निरपेक्ष' संघर्ष है?

Question

मैं divअन्य तत्वों और केंद्र में इसके बाल तत्व के प्रभाव के बिना स्क्रीन के शीर्ष पर एक छड़ी बनाना चाहता हूं ।

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
 }

<div class="parent">
  <div class="child">text</div>
</div>

जब मैं position: absoluteलाइन जोड़ता हूं , justify-content: centerतो अमान्य हो जाता है। क्या वे एक दूसरे के साथ संघर्ष करते हैं और, क्या समाधान है?

संपादित करें

धन्यवाद दोस्तों यह माता पिता की चौड़ाई की समस्या है। लेकिन मैं रिएक्ट नेटिव में हूं, इसलिए मैं सेट नहीं कर सकता width: 100%। कोशिश की flex: 1और align-self: stretch, दोनों काम नहीं कर रहे हैं। मैंने विंडो की पूरी चौड़ाई प्राप्त करने के लिए आयामों का उपयोग किया और यह काम कर गया।

संपादित करें

रिएक्ट नेटिव के नए संस्करण के रूप में (मैं 0.49 के साथ हूं), यह स्वीकार करता है width: 100%।

Comments

यह आपके लिए मददगार हो सकता है .. css-tricks.com/almanac/properties/p/position

— शिवकुमार KONDI

2016 में कुछ समय बाद इसका व्यवहार बदल गया - Developers.google.com/web/updates/2016/06/…

— Simon_Weaver

Answer 1

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

इसका मतलब है कि

• यदि आप किसी तत्व के साथ पूर्ण स्थिति जोड़ते हैं display: inline-flex, तो यह ब्लॉक-लेवल (जैसे display: flex) हो जाएगा, लेकिन फिर भी एक फ्लेक्स स्वरूपण संदर्भ उत्पन्न करेगा।

• यदि आप किसी तत्व के साथ पूर्ण स्थिति जोड़ते हैं display: flex, तो यह भरण-उपलब्ध फ़िट-एल्गोरिथ्म (इनलाइन-स्तरीय कंटेनरों के विशिष्ट) का उपयोग करके उपलब्ध फ़िल के बजाय आकार में होगा।

यह कहा, बिल्कुल स्थिति फ्लेक्स बच्चों के साथ संघर्ष ।

चूंकि यह आउट-ऑफ-फ्लो है, फ्लेक्स कंटेनर का एक बिल्कुल तैनात बच्चा फ्लेक्स लेआउट में भाग नहीं लेता है।

Answer 2

आप माता-पिता की चौड़ाई भूल गए हैं

.parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

Answer 3

आपको width:100%मूल centerपाठ को देना होगा ।

 .parent {
   display: flex;
   justify-content: center;
   position: absolute;
   width:100%
 }

<div class="parent">
  <div class="child">text</div>
</div>

यदि आपको केंद्र को लंबवत संरेखित करने की आवश्यकता है, तो दे height:100%औरalign-itens: center

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   width:100%;
   height: 100%;
 }

Answer 4

मेरे मामले में, मुद्दा यह था कि मेरे पास एक अन्य तत्व था, जो परस्पर विरोधी z- सूचकांक के साथ div के केंद्र में था।

.wrapper {
  color: white;
  width: 320px;
  position: relative;
  border: 1px dashed gray;
  height: 40px
}

.parent {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 20px;
  left: 0;
  right: 0;
  /* This z-index override is needed to display on top of the other
     div. Or, just swap the order of the HTML tags. */
  z-index: 1;
}

.child {
  background: green;
}

.conflicting {
  position: absolute;
  left: 120px;
  height: 40px;
  background: red;
  margin: 0 auto;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
       Centered
    </div>
  </div>
  <div class="conflicting">
    Conflicting
  </div>
</div>