दिलचस्प पोस्ट
कुंजी कीवर्ड का अर्थ क्या है? हिट-परीक्षण एसवीजी आकार? सी # से थोक डेटाबेस आवेषण का सबसे अच्छा तरीका क्या है? एडब्ल्यूएस एसएनएस के साथ एफसीएम एसएसआरएस से निर्यात किए गए पीडीएफ़ में रिक्त पृष्ठों से छुटकारा पाने के तरीके जावास्क्रिप्ट गतिशील रूप से स्ट्रिंग से वस्तु विधि का आह्वान करता है किसी ऑब्जेक्ट को डिवाइस पर कॉपी करें? एएसपी.नेट एमवीसी में अपलोड की गई फाइल को कैसे मान्य करें? पिछले महीने की पहली तारीख और अंतिम तिथि कैसे प्राप्त करें? (जावा) ईवेंट को चालू ब्राउज़र पर कैप्चर करें बाहरी स्पर्श को बंद करने से एंड्रॉइड गतिविधि संवाद रोकें कैसे __getattribute__ पद्धति का उपयोग किया जाता है? जाने में लाइन द्वारा फ़ाइल लाइन पढ़ना WinAPI के साथ फ़ोल्डर के चयनित आइटम प्राप्त करें सुपर क्लास से उप-क्लास तक स्पष्ट कास्टिंग

सही-संरेखित फ्लेक्स आइटम?

position: absolute का उपयोग करने की तुलना में "संपर्क" को सही-संरेखित करने का एक और अधिक फ्लेक्सबॉक्स-इश तरीका है position: absolute ?

http://jsfiddle.net/vqDK9/

Solutions Collecting From Web of "सही-संरेखित फ्लेक्स आइटम?"

हेयर यू गो। justify-content: space-between सेट करें justify-content: space-between फ्लेक्स कन्टेनर पर justify-content: space-between

 .main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { text-align: center; } 
 <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <!-- <div class="b"><a href="#">Some title centered</a></div> --> <div class="c"><a href="#">Contact</a></div> </div> 

एक अधिक फ्लेक्स दृष्टिकोण एक auto बायां मार्जिन (फ्लेक्स आइटम का उपयोग ऑटो ब्लॉक के स्वरूपण संदर्भ में उपयोग किए जाने से थोड़ा अलग ढंग से करता है) का उपयोग करना होगा।

 .c { margin-left: auto; } 

नवीनीकृत बेला

यदि आप इस के लिए फ्लेक्सबॉक्स का उपयोग करना चाहते हैं, तो आप इसे करने के लिए सक्षम होना चाहिए ( display: flex कंटेनर पर, flex: 1 आइटम पर flex: 1 , और text-align: right.c ):

 .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; flex: 1; } .b { text-align: center; } .c { text-align: right; } 

… या वैकल्पिक रूप से (यहां तक ​​कि सरल), अगर आइटम को पूरा करने की आवश्यकता नहीं है, तो आप justify-content: space-between उपयोग कर सकते हैं justify-content: space-between कंटेनर के justify-content: space-between और text-align नियमों को पूरी तरह से हटा दें:

 .main { display: flex; justify-content: space-between; } .a, .b, .c { background: #efefef; border: 1px solid #999; } 

यहां कोडपेन पर एक डेमो है जो आपको जल्दी से ऊपर की कोशिश करने की अनुमति देता है।

शेष स्थान को भरने के लिए आप एक पूरक को भी उपयोग कर सकते हैं।

 <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="filler"></div> <div class="c"><a href="#">Contact</a></div> </div> .filler{ flex-grow: 1; } 

मैंने 3 अलग-अलग संस्करणों के साथ समाधान अपडेट किया है यह एक अतिरिक्त भराव तत्व का उपयोग करने की वैधता की चर्चा के कारण है। यदि आप कोड चलाते हैं तो आप देखते हैं कि सभी समाधान अलग-अलग काम करते हैं। उदाहरण के लिए आइटम बी पर भराव वर्ग सेट करने से यह आइटम शेष स्थान को भर देगा। इसका लाभ है कि कोई 'मृत' स्थान नहीं है जो क्लिक करने योग्य नहीं है।

 <div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="filler"></div> <div class="c"><a href="#">Contact</a></div> </div> <div class="mainfiller"> <div class="a"><a href="#">Home</a></div> <div class="filler b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <style> .main { display: flex; justify-content: space-between; } .mainfiller{display: flex;} .filler{flex-grow:1; text-align:center} .a, .b, .c { background: yellow; border: 1px solid #999; } </style> 

यदि आपको एक वस्तु छोड़नी है (एक शीर्ष लेख की तरह), लेकिन फिर एक से अधिक आइटम सही संरेखित (जैसे 3 छवियों) की आवश्यकता है, तो आप ऐसा कुछ करेंगे:

 h1 { flex-basis: 100%; // forces this element to take up any remaining space } img { margin: 0 5px; // small margin between images height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size } 

ये है कि वह क्या दिखेगा (केवल रिलेवेंट सीएसएस को ऊपर स्निपेट में शामिल किया गया था)

यहां छवि विवरण दर्ज करें

इतना आसान जैसे की

 .main { display: flex; flex-direction:row-reverse;}