Sprawianie, że element elastyczny płynie w prawo

114

mam

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

Rodzic ma

.parent {
    display: flex;
}

W przypadku mojego pierwszego dziecka chcę po prostu przesunąć przedmiot w prawo.

I inne moje elementy div zgodnie z regułą flex ustawioną przez rodzica.

Czy to jest możliwe?

Jeśli nie, jak mam zrobić float: rightunder flex?

html css flexbox Zhen Liu
źródło

Odpowiedzi:

213

Nie możesz używać floatwewnątrz kontenera elastycznego, a powodem jest to, że właściwość float nie ma zastosowania do pól na poziomie flex, jak widać tutaj Fiddle.

Więc jeśli chcesz umieścić childelement na prawo od parentelementu, możesz użyć, margin-left: autoale teraz childelement przesunie również inny divw prawo, jak widać tutaj Fiddle.

Co można teraz zrobić, to zmiana kolejności elementów i ustawić order: 2na childelemencie tak nie wpływa drugi div

.parent {
  display: flex;
}
.child {
  margin-left: auto;
  order: 2;
}
<div class="parent">
  <div class="child">Ignore parent?</div>
  <div>another child</div>
</div>
Rozwiń fragment

Nenad Vracar
źródło
Dzięki, mogę rzucić okiem na pierwsze rozwiązanie. Nie chcę używać wyświetlacza: absolutny, ponieważ moje inne dzieci nie powinny być zakryte pod pierwszym dzieckiem.
Zhen Liu
4
„ pływaki nie naruszają elastycznego pojemnika ”. To prawda, ale to nie jest powód. Powodem jest to, że floatwłaściwość nie dotyczy pudełek na poziomie flex.
Oriol
To działa, dziękuję! Dlaczego justify-self: end;(lub coś podobnego) nie działa dla dziecka? Wydaje się, że jest to niezbyt elastyczne rozwiązanie problemu z flexboxem.
Brady Dowling
1
@BradyDowling Wiem, że to spóźniona odpowiedź, ale justify-self end wymaga, aby wyświetlacz był ustawiony na siatkę. Flexboxy będą ignorować justify-self: end. Zobacz tutaj: developer.mozilla.org/en-US/docs/Web/CSS/justify-self
Paul
<div> inne dziecko </div> <div class = "child"> Ignorować rodzica? </div> Możesz zamienić dwa elementy div i bez kolejności 2 to też działa
yeeen
26

Nie potrzebujesz pływaków. W rzeczywistości są bezużyteczne, ponieważ elementy pływające są ignorowane w flexbox .

Nie potrzebujesz też pozycjonowania CSS.

Dostępnych jest kilka metod elastycznych. automarginesy zostały wymienione w innej odpowiedzi .

Oto dwie inne opcje:

  • Użytkowanie justify-content: space-betweeni orderwłasność.
  • Użyj justify-content: space-betweeni odwróć kolejność elementów 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>
Rozwiń fragment

Michael Benjamin
źródło