CSS wyrównaj jeden element z Flexbox

212

https://jsfiddle.net/vhem8scs/

Czy możliwe jest, aby dwa elementy były wyrównane do lewej, a jeden do prawej z Flexbox? Link pokazuje to wyraźniej. Ostatni przykład jest tym, co chcę osiągnąć.

W Flexbox mam jeden blok kodu. Z float mam cztery bloki kodu. To jeden z powodów, dla których wolę flexbox.

HTML

<div class="wrap">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

<!-- DESIRED RESULT -->

<div class="result">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

CSS

.wrap {
  display: flex;
  background: #ccc;
  width: 100%;
  justify-content: space-between;
}

.result {
  background: #ccc;
  margin-top: 20px;
}

.result:after {
  content: '';
  display: table;
  clear: both;
}

.result div {
  float: left;
}
.result div:last-child {
  float: right;
}
Jens Törnell
źródło

Odpowiedzi:

524

Aby wyrównać jedno elastyczne dziecko w prawo, ustaw je za pomocąmargin-left: auto;

Z specyfikacji Flex :

Jednym z zastosowań automatycznych marginesów w głównej osi jest rozdzielenie elementów elastycznych na odrębne „grupy”. Poniższy przykład pokazuje, jak użyć tego do odtworzenia wspólnego wzorca interfejsu użytkownika - pojedynczego paska działań, z których niektóre są wyrównane do lewej, a inne wyrównane do prawej.

.wrap div:last-child {
  margin-left: auto;
}

Zaktualizowano skrzypce

Uwaga:

Możesz osiągnąć podobny efekt, ustawiając Flex-Grow: 1 na środkowym elemencie Flex (lub stenografii flex:1), który popychałby ostatni przedmiot do końca w prawo. ( Demo )

Oczywista różnica polega jednak na tym, że środkowy element staje się większy, niż może być. Dodaj ramkę do elementów elastycznych, aby zobaczyć różnicę.

Próbny

Danield
źródło
Dzięki! Wypróbowałem inną rzecz, która zadziałała, zanim to przeczytałem. Miało to ustawić flex-grow: 1 na elemencie, który powinien naciskać na drugi. To też działało. Czy wiesz, które z nich są lepsze i dlaczego?
Jens Törnell,
2
Świetna odpowiedź. Margines nie zajmuje więc dodatkowego miejsca, a flex: 1 tak. Chłodny!
Jens Törnell,
4
@ JensTörnell, automargines wykorzystuje puste miejsce w pojemniku do oddzielenia elementów elastycznych. Właściwość flex-grow/ flexzajmuje puste miejsce i nadaje elementowi flex, który rozszerza się o tę kwotę. Jak wspomniała Danield, ta ostatnia metoda powoduje, że element Flex DRUGI jest większy, czego możesz nie chcieć.
Michael Benjamin
12
Nie wszyscy bohaterowie noszą peleryny.
Tom
2
@ user1063287, aby wyrównać wiele elementów w prawo, po prostu zastosuj margines lewy: automatyczny na pierwszym elemencie, który musi zostać wyrównany do prawej. Więc powiedzmy, że chcesz ostatnie 4 elementy wyrównane do prawej, można to zrobić: div:nth-last-child(4) { margin-left: auto } codepen.io/danield770/pen/ERyoar
Danield
37

Aby uzyskać zwięzłą, czystą opcję Flexbox, zgrupuj elementy wyrównane do lewej i elementy wyrównane do prawej:

<div class="wrap">
  <div>
    <span>One</span>
    <span>Two</span>
  </div>
  <div>Three</div>
</div>

i użyj space-between:

.wrap {
  display: flex;
  background: #ccc;
  justify-content: space-between;
}

W ten sposób możesz grupować wiele elementów po prawej stronie (lub tylko jeden).

https://jsfiddle.net/c9mkewwv/3/

spflow
źródło
Działa to, ale jeśli nie zmienisz elementów wewnątrz każdej grupy na display: inline;lub display: inline-block;, wówczas zostaną one ułożone w stos zamiast wszystkich w rzędzie, takich jak Flexbox, w przeciwnym razie miałyby je.
DIMM Reaper
@TheDIMMReaper Nie jestem pewien, czy widzę problem. Czy mógłbyś się rozwinąć?
spflow 26.09.17
Chodzi mi tylko o to, jak zmieniłeś tagi natychmiast zawijając Onei Twood divs do spans - jeśli nadal display: block;byłyby, to popłynęłyby do oddzielnych linii. Ponieważ OP miał początkowo divs, chciałem tylko zaznaczyć, że po prostu umieszczenie ich w innym divnie działałoby bez zmiany wyświetlania oryginalnych tagów.
DIMM Reaper
1
Tak, ponieważ elementy są teraz na niższym poziomie, display: flexnie mają już wpływu na ich układ. Jeśli chcesz użyć div, tak, inlinelub inline-blockzadziała. Ale oczywiście, flexponieważ używamy go już jako domyślnego flex-direction: rowz rodzicielskim divem. dawny. jsfiddle.net/ynbb5964/2
spflow 28.09.17
Dzięki, próbowałem align-self: flex-end, ale dlaczego to nie działa?
Anand
3

Aby wyrównać niektóre elementy (headerElement) na środku i ostatni element po prawej stronie (headerEnd).

.headerElement {
    margin-right: 5%;
    margin-left: 5%;
}
.headerEnd{
    margin-left: auto;
}
Satvik Vats
źródło