एक फ्लेक्स आइटम फ्लोट करना सही है

Question

मेरे पास एक

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div> another child </div>
</div>

जनक के पास है

.parent {
    display: flex;
}

अपने पहले बच्चे के लिए, मैं केवल आइटम को दाईं ओर फ़्लोट करना चाहता हूं।

और माता-पिता द्वारा निर्धारित फ्लेक्स नियम का पालन करने के लिए मेरे अन्य डिव्स।

क्या यह कुछ संभव है?

यदि नहीं, तो मैं float: rightफ्लेक्स के नीचे कैसे कर सकता हूं ?

Answer 1

आप फ्लेक्स कंटेनर केfloat अंदर उपयोग नहीं कर सकते हैं और इसका कारण यह है कि फ्लोट-प्रॉपर्टी फ्लेक्स-स्तर के बक्से पर लागू नहीं होती है जैसा कि आप यहां देख सकते हैं ।Fiddle

इसलिए यदि आप childतत्व के अधिकार को parentतत्व की स्थिति में लाना चाहते हैं तो आप उपयोग कर सकते हैं, margin-left: autoलेकिन अब childतत्व भी अन्य divको दाईं ओर धकेल देगा जैसा कि आप यहां देख सकते हैं Fiddle।

अब आप क्या कर सकते हैं तत्वों का परिवर्तन क्रम है और तत्व order: 2पर सेट childहै ताकि यह दूसरे तलाक को प्रभावित न करे

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}

<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>

Comments

धन्यवाद मैं पहले समाधान पर एक नज़र डाल सकते हैं। मैं प्रदर्शन का उपयोग नहीं करना चाहता: मेरे अन्य बच्चों को पहले बच्चे के तहत कवर नहीं किया जाना चाहिए।

— लियू में जेन लियू

" फ्लोट कंटेनर में तैरता नहीं है "। यह सच है, लेकिन यह कारण नहीं है। कारण यह है कि floatसंपत्ति फ्लेक्स-स्तरीय बक्से पर लागू नहीं होती है।

— ओरिऑल

यह काम करता है, धन्यवाद! justify-self: end;बच्चे के लिए क्यों (या कुछ इसी तरह) काम नहीं करता है? ऐसा लगता है कि फ्लेक्सबॉक्स समस्या का समाधान नहीं है।

— ब्रैडी डाउलिंग

@BradyDowling मुझे पता है कि यह एक देर से जवाब है, लेकिन औचित्य-स्व अंत में प्रदर्शन को ग्रिड पर सेट करने की आवश्यकता होती है। Flexboxes औचित्य-स्व: अंत को अनदेखा करेगा। यहाँ देखें: developer.mozilla.org/en-US/docs/Web/CSS/justify-self

— Paul

<div> एक और बच्चा </ div> <div class = "child"> माता-पिता की उपेक्षा करें? </ div> U दो div स्वैप कर सकता है और 2 आदेश के बिना यह भी काम करता है

— yeeen

Answer 2

आपको तैरने की जरूरत नहीं है। वास्तव में, वे बेकार हैं क्योंकि फ्लेक्सबॉक्स में फ्लोट्स को अनदेखा किया जाता है ।

आपको सीएसएस पोजिशनिंग की भी आवश्यकता नहीं है।

कई फ्लेक्स तरीके उपलब्ध हैं। एक अन्य उत्तर में autoमार्जिन का उल्लेख किया गया है ।

यहाँ दो अन्य विकल्प हैं:

• का प्रयोग करें justify-content: space-betweenऔर orderसंपत्ति।
• justify-content: space-betweenडिव के क्रम का उपयोग करें और उलटा करें ।

.parent {
    display: flex;
    justify-content: space-between;
}

.parent:first-of-type > div:last-child { order: -1; }

p { background-color: #ddd;}

<p>Method 1: Use <code>justify-content: space-between</code> and <code>order-1</code></p>

<div class="parent">
    <div class="child" style="float:right"> Ignore parent? </div>
    <div>another child </div>
</div>

<hr>

<p>Method 2: Use <code>justify-content: space-between</code> and reverse the order of 
             divs in the mark-up</p>

<div class="parent">
    <div>another child </div>
    <div class="child" style="float:right"> Ignore parent? </div>
</div>