Esnek bir öğenin doğru yüzmesini sağlamak

Bende var

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

Ebeveyn var

.parent {
    display: flex;
}

İlk çocuğum için öğeyi sağa doğru kaydırmak istiyorum.

Ve diğer div'lerim, ebeveyn tarafından belirlenen esneklik kuralını takip edecek.

Bu mümkün bir şey mi?

Değilse, nasıl düşük float: rightesneklik yaparım ?

Sen kullanamazsınız floatiçindeki esnek konteyner ve sebebi olmasıdır esnek düzey kutuları için geçerli değildir şamandıra özelliği burada gördüğünüz gibi Fiddle.

Öyleyse child, parentöğeyi öğenin sağına yerleştirmek istiyorsanız kullanabilirsiniz, margin-left: autoancak şimdi childöğe de divburada gördüğünüz gibi diğerini sağa itecektir Fiddle.

Şimdi yapabileceğiniz şey, ikinci div'i etkilememesi için öğelerin sırasını değiştirmek ve öğeye ayarlamaktır 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>

Şamandıralara ihtiyacınız yok. Aslında, flexbox'ta kayan değerler göz ardı edildiği için işe yaramazlar .

Ayrıca CSS konumlandırmaya ihtiyacınız yoktur.

Çeşitli esnek yöntemler mevcuttur. autokenar boşluklarından başka bir cevapta bahsedilmiştir .

İşte diğer iki seçenek:

• Kullanım justify-content: space-betweenve ordermülkiyet.
• justify-content: space-betweenDiv'lerin sırasını kullanın ve tersine çevirin.

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