Umieść ostatni element elastyczny na końcu kontenera

Question 1

To pytanie dotyczy przeglądarki z pełną obsługą css3, w tym Flexbox.

Mam pojemnik elastyczny z kilkoma przedmiotami. Wszystkie są uzasadnione do flex-start, ale chcę, aby ostatni .end element był uzasadniony do flex-end. Czy istnieje dobry sposób na zrobienie tego bez modyfikowania kodu HTML i bez uciekania się do pozycjonowania bezwzględnego?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Rozwiń fragment

Question 2

Moduł z elastycznym układem pudełek - 8.1. Wyrównanie z automatycznymi marginesami

Automatyczne marginesy na elementach elastycznych działają bardzo podobnie do automatycznych marginesów w przepływie bloków:

Podczas obliczania elastycznych podstaw i elastycznych długości, automatyczne marginesy są traktowane jako 0.

Przed wyrównaniem za pomocą justify-contenti align-selfkażda dodatnia wolna przestrzeń jest rozdzielana na automatyczne marginesy w tym wymiarze.

Dlatego możesz użyć margin-top: autodo rozłożenia przestrzeni między innymi elementami a ostatnim elementem.

Spowoduje to umieszczenie ostatniego elementu na dole.

p:last-of-type {
  margin-top: auto;
}

Pokaż fragment kodu

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

Expand snippet

Podobnie możesz również użyć margin-left: autolub margin-right: autodo tego samego wyrównania w poziomie.

p:last-of-type {
  margin-left: auto;
}

Pokaż fragment kodu

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Expand snippet

Question 3

Ta zasada flexbox działa również w poziomie

Podczas obliczania elastycznych baz i elastycznych długości, automatyczne marginesy są traktowane jako 0.
Przed wyrównaniem za pomocą justify-content i align-self każda dodatnia wolna przestrzeń jest rozdzielana na automatyczne marginesy w tym wymiarze.

Ustawienie automatycznego lewego marginesu dla ostatniej pozycji wykona pracę.

.last-item {
  margin-left: auto;
}

Przykład kodu:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Rozwiń fragment

Codepen Snippet

Może to być bardzo przydatne w przypadku stopek pulpitu.

Tak jak tutaj Envato z logo firmy.

Codepen Snippet

Answer 1

To pytanie dotyczy przeglądarki z pełną obsługą css3, w tym Flexbox.

Mam pojemnik elastyczny z kilkoma przedmiotami. Wszystkie są uzasadnione do flex-start, ale chcę, aby ostatni .end element był uzasadniony do flex-end. Czy istnieje dobry sposób na zrobienie tego bez modyfikowania kodu HTML i bez uciekania się do pozycjonowania bezwzględnego?

.container {
  display: flex;
  flex-direction: column;
  outline: 1px solid green;
  min-height: 400px;
  width: 100px;
  justify-content: flex-start;
}
p {
  height: 50px;
  background-color: blue;
  margin: 5px;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="end"></p>
</div>

Rozwiń fragment

Answer 2

2

Tak. Zobacz autoilustracje marginesów tutaj: stackoverflow.com/a/33856609/3597276

Michael Benjamin

Answer 3

Możliwe powtórzenie wyrównywania elementu do dna za pomocą flexbox

mfluehr

Answer 4

Moduł z elastycznym układem pudełek - 8.1. Wyrównanie z automatycznymi marginesami

Automatyczne marginesy na elementach elastycznych działają bardzo podobnie do automatycznych marginesów w przepływie bloków:

Podczas obliczania elastycznych podstaw i elastycznych długości, automatyczne marginesy są traktowane jako 0.

Przed wyrównaniem za pomocą justify-contenti align-selfkażda dodatnia wolna przestrzeń jest rozdzielana na automatyczne marginesy w tym wymiarze.

Dlatego możesz użyć margin-top: autodo rozłożenia przestrzeni między innymi elementami a ostatnim elementem.

Spowoduje to umieszczenie ostatniego elementu na dole.

p:last-of-type {
  margin-top: auto;
}

Pokaż fragment kodu

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 200px;
  width: 100px;
}
p {
  height: 30px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-top: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
</div>

Expand snippet

Podobnie możesz również użyć margin-left: autolub margin-right: autodo tego samego wyrównania w poziomie.

p:last-of-type {
  margin-left: auto;
}

Pokaż fragment kodu

.container {
  display: flex;
  width: 100%;
  border: 1px solid #000;
}
p {
  height: 50px;
  width: 50px;
  background-color: blue;
  margin: 5px;
}
p:last-of-type {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Expand snippet

Answer 5

1

ach doskonały, nie mogę uwierzyć, że to przegapiłem! Szczególnie żenujące, ponieważ całkowicie wiem o sztuczce używającej marginesu auto do wyśrodkowania w pionie i używam jej cały czas

George Mauer

Answer 6

1

@ j08691 Nie mam formalnego wyjaśnienia, dlaczego to działa, ale jest podobne do tego, jak można użyć margin: 0 autodo wyśrodkowania w poziomie. Elementy Flexbox uwzględniają margines i uważam, że margin: autozasadniczo zapewni to możliwie największą przestrzeń między rodzeństwem. Zobacz: w3.org/TR/css-flexbox-1/#auto-margins

Josh Crozier

Answer 7

2

@ jo8691, jeśli się nie mylę, margin: autona elemencie elastycznym mówi mu, aby stworzyć jak najwięcej miejsca w tym kierunku.

George Mauer,

Answer 8

1

Specyfikacja mówi

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

George Mauer

Answer 9

Próbuję dowiedzieć się więcej o flexboksie, więc byłoby wspaniale zobaczyć odniesienie opisujące to zachowanie. Zwłaszcza, że jest to również zamierzone, a nie dziwactwo ani efekt uboczny.

j08691

Answer 10

Ta zasada flexbox działa również w poziomie

Podczas obliczania elastycznych baz i elastycznych długości, automatyczne marginesy są traktowane jako 0.
Przed wyrównaniem za pomocą justify-content i align-self każda dodatnia wolna przestrzeń jest rozdzielana na automatyczne marginesy w tym wymiarze.

Ustawienie automatycznego lewego marginesu dla ostatniej pozycji wykona pracę.

.last-item {
  margin-left: auto;
}

Przykład kodu:

.container {
  display: flex;
  width: 400px;
  outline: 1px solid black;
}

p {
  height: 50px;
  width: 50px;
  margin: 5px;
  background-color: blue;
}

.last-item {
  margin-left: auto;
}

<div class="container">
  <p></p>
  <p></p>
  <p></p>
  <p class="last-item"></p>
</div>

Rozwiń fragment

Codepen Snippet

Może to być bardzo przydatne w przypadku stopek pulpitu.

Tak jak tutaj Envato z logo firmy.

Codepen Snippet

Answer 11

3

Nie wiem, dlaczego to faktycznie działa, ale pomogło mi w projekcie.

Louis345,

Answer 12

4

A jeśli potrzebuję, aby wszystkie elementy znajdowały się pośrodku, a ostatni po prawej stronie?

Illorian

Umieść ostatni element elastyczny na końcu kontenera

Odpowiedzi:

Ta zasada flexbox działa również w poziomie