Làm cho một mục linh hoạt nổi ngay

tôi có một

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

Cha mẹ có

.parent {
    display: flex;
}

Đối với đứa con đầu tiên của tôi, tôi muốn chỉ đơn giản là thả nổi món đồ đó sang bên phải.

Và các div khác của tôi tuân theo quy tắc flex do cha mẹ đặt ra.

Điều này có khả thi không?

Nếu không, làm thế nào để làm một float: rightdưới flex?

Bạn không thể sử dụng floatbên trong vùng chứa flex và lý do là thuộc tính float không áp dụng cho các hộp cấp flex như bạn có thể thấy ở đây Fiddle.

Vì vậy, nếu bạn muốn đặt childphần tử ở bên phải của parentphần tử, bạn có thể sử dụng margin-left: autonhưng bây giờ childphần tử cũng sẽ đẩy phần tử khác divsang bên phải như bạn có thể thấy ở đây Fiddle.

Những gì bạn có thể làm bây giờ là thay đổi thứ tự của các phần tử và đặt order: 2trên childphần tử để nó không ảnh hưởng đến div thứ hai

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

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

Bạn không cần phao. Trên thực tế, chúng vô dụng vì float bị bỏ qua trong flexbox .

Bạn cũng không cần định vị CSS.

Có một số phương pháp flex có sẵn. autolợi nhuận đã được đề cập trong một câu trả lời khác .

Đây là hai tùy chọn khác:

• Sử dụng justify-content: space-betweenvà ordertài sản.
• Sử dụng justify-content: space-betweenvà đảo ngược thứ tự của các 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>