कैसे करने के लिए एक फ्लेक्स आइटम केंद्र संरेखित और एक अन्य flexbox

Question

का उपयोग कर मैं पूरी तरह flexbox लिए नया हूँ सही संरेखित और बटन संरेखित करने के लिए चाहता था, लेकिन मैं एक केंद्र गठबंधन बटन और एक अधिकार के साथ सामान्य स्थिति को संभालने के लिए कैसे नहीं देख सकता था केवल फ्लेक्सबॉक्स का उपयोग करके एक ही पंक्ति पर गठबंधन बटन।

हालांकि, मुझे एक ऐसा तरीका मिला जिसने राइट-गठबंधन आइटम और फ्लेक्स justify-content के साथ space-between के साथ एक ही अदृश्य बाएं-गठबंधन आइटम का उपयोग किया, ताकि मध्यम आइटम पंक्ति पर केंद्रित हो सके।

वहाँ flexbox के साथ एक और अधिक प्रत्यक्ष रास्ता नहीं है?

.flexcontainer { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    width: 500px; 
 
    height: 200px; 
 
} 
 
.iteminvisible { 
 
    flex: 0 1 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    visibility: hidden; 
 
} 
 
.itemcenter { 
 
    flex: 0 1 auto; 
 
    width: 150px; 
 
    height: 100px; 
 
    .itemright { 
 
    flex: 0 1 auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    }

<div class="flexcontainer"> 
 
    <div class="iteminvisible">Other</div> 
 
    <div class="itemcenter">One</div> 
 
    <div class="itemright">Other</div> 
 
</div>

Answer 1

है कि मैं क्या कर रहा हूँ समझ से, बटन आप "फ्लोट" सही flex: 0 1 auto बल्कि flex: 0 0 auto नहीं होना चाहिए चाहते हैं। flex शैली में पहला पैरामीटर यह निर्धारित करता है कि कोई आइटम बढ़ना चाहिए या नहीं। यदि आप नहीं चाहते हैं कि यह आवश्यक से अधिक जगह भरें, तो इसे बढ़ने के लिए न कहें।

Answer 2

एक अदृश्य फ्लेक्स आइटम के साथ justify-content: space-between का उपयोग करना, अपने प्रश्न में वर्णित है, लेआउट आप चाहते प्राप्त करने के लिए एक अच्छा तरीका है। बस ध्यान दें कि मध्य मद पर ही छोड़ दिया और सही आइटम बराबर लंबाई (see demo) कर रहे हैं केंद्रित किया जा सकता है।

एक अन्य समाधान आप विचार कर सकते हैं auto margins और absolute positioning शामिल है। इस विधि के दो लाभों को अतिरिक्त मार्क-अप की आवश्यकता नहीं है और आइटम आकारों के बावजूद सच्चे केंद्र को हासिल किया जा सकता है। एक दोष यह है कि केंद्रित आइटम document flow से हटा दिया गया है (जो आपके लिए महत्वपूर्ण हो सकता है या नहीं)।

.flexcontainer { 
 
     display: flex; 
 
     justify-content: flex-start; /* adjustment */ 
 
     position: relative;   /* new */ 
 
     width: 500px; 
 
     height: 200px; 
 
    } 
 

 
.itemcenter { 
 
     flex: 0 1 auto; 
 
     width: 150px; 
 
     height: 100px; 
 
     position: absolute;    /* new */ 
 
     left: 50%; 
 
     transform: translateX(-50%); 
 
    } 
 

 
.itemright { 
 
     flex: 0 1 auto; 
 
     width: 100px; 
 
     height: 100px; 
 
     margin-left: auto;    /* new */ 
 
    }

<div class="flexcontainer"> 
 
    <div class="itemcenter">One</div> 
 
    <div class="itemright">Other</div> 
 
</div>

अधिक यहाँ विवरण: Methods for Aligning Flex Items along the Main Axis (देखें बॉक्स # 62-78)।

Answer 3

.container { 
     display: flex; 
     flex-direction: column; //this will allow flex-end to move item to the right    
     align-items: center; 
    } 
    .right-item { 
     align-self: flex-end; 
    }