ทำให้รายการดิ้นลอยไปทางขวา

ฉันมี

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

ผู้ปกครองมี

.parent {
    display: flex;
}

สำหรับลูกคนแรกของฉันฉันต้องการเพียงแค่ลอยสิ่งของไปทางขวา

และ div อื่น ๆ ของฉันเพื่อทำตามกฎการยืดหยุ่นที่กำหนดโดยผู้ปกครอง

สิ่งนี้เป็นไปได้หรือไม่?

ถ้าไม่ฉันจะทำfloat: rightunder flex ได้อย่างไร?

คุณไม่สามารถใช้floatภายในภาชนะดิ้นและเหตุผลก็คือคุณสมบัติลอยไม่ได้นำไปใช้กับกล่องดิ้นระดับFiddleที่คุณสามารถดูที่นี่

ดังนั้นหากคุณต้องการให้อยู่ในตำแหน่งchildองค์ประกอบไปทางขวาของparentองค์ประกอบที่คุณสามารถใช้margin-left: autoแต่ตอนนี้childองค์ประกอบยังจะผลักดันอื่น ๆไปทางขวาในขณะที่คุณสามารถดูที่นี่divFiddle

คุณสามารถทำอะไรขณะนี้คำสั่งเปลี่ยนแปลงขององค์ประกอบและการตั้งค่าorder: 2ในchildองค์ประกอบจึงไม่ส่งผลกระทบต่อ div สอง

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

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

คุณไม่จำเป็นต้องลอย ในความเป็นจริงพวกเขากำลังไร้ประโยชน์เพราะลอยจะถูกละเลยใน flexbox

คุณไม่จำเป็นต้องวางตำแหน่ง CSS

มีวิธีการดิ้นหลายวิธี autoอัตรากำไรขั้นต้นได้รับการกล่าวถึงในคำตอบอื่น

นี่คืออีกสองตัวเลือก:

• การใช้งานjustify-content: space-betweenและorderทรัพย์สิน
• ใช้justify-content: space-betweenและย้อนกลับลำดับของ div

.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>