Dlaczego w CSS Flexbox nie ma właściwości „justify-items” i „justify-self”?

Rozważ główną oś i oś poprzeczną elastycznego pojemnika:

                                                                                                                                                   _{Źródło: W3C}

Aby wyrównać elementy elastyczne wzdłuż głównej osi, istnieje jedna właściwość:

• justify-content

Aby wyrównać elementy elastyczne wzdłuż osi poprzecznej, istnieją trzy właściwości:

• align-content
• align-items
• align-self

Na powyższym zdjęciu główna oś jest pozioma, a oś poprzeczna pionowa. Są to domyślne kierunki elastycznego kontenera.

Jednak te kierunki można łatwo zamieniać z flex-directionwłaściwością.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(Oś poprzeczna jest zawsze prostopadła do osi głównej.)

Chodzi mi o to, żeby opisać, jak działają osie, że wydaje się, że w żadnym kierunku nie ma nic specjalnego. Oś główna, oś poprzeczna, oba są równe pod względem ważności iflex-direction ułatwiają przełączanie w przód iw tył.

Dlaczego więc oś poprzeczna ma dwie dodatkowe właściwości wyrównania?

Dlaczego align-contenti są align-itemsskonsolidowane w jedną właściwość dla głównej osi?

Dlaczego oś główna nie otrzymuje justify-selfwłaściwości?

Scenariusze, w których te właściwości byłyby przydatne:

• umieszczenie elementu elastycznego w rogu pojemnika elastycznego
  #box3 { align-self: flex-end; justify-self: flex-end; }

• tworzenie grupy elementów elastycznych wyrównywanie do prawej ( justify-content: flex-end), ale pierwszy element wyrównywanie do lewej ( justify-self: flex-start)

  Rozważ sekcję nagłówka z grupą elementów nawigacyjnych i logo. Dzięki justify-selflogo można wyrównać w lewo, podczas gdy elementy nawigacyjne pozostają daleko w prawo, a całość płynnie dostosowuje się („wygina”) do różnych rozmiarów ekranu.

• w rzędzie trzech elastycznych elementów przymocuj środkowy element do środka pojemnika ( justify-content: center) i wyrównaj sąsiednie przedmioty do krawędzi pojemnika ( justify-self: flex-starti justify-self: flex-end).

  Należy zauważyć, że wartości space-aroundi space-betweenna justify-contentnieruchomości nie będzie utrzymywać pozycję środkową skupia około pojemnika jeśli sąsiednie elementy mają różne szerokości.

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>

wersja jsFiddle

W tym piśmie nie ma wzmianki o specyfikacji Flexboxjustify-self ani justify-itemso niej .

Jednak w CSS Box Alignment Module , który jest niedokończoną propozycją W3C dotyczącą ustanowienia wspólnego zestawu właściwości wyrównania do użytku we wszystkich modelach pudełek, jest to:

                                                                                                                                                   _{Źródło: W3C}

Zauważysz to justify-selfi justify-itemsrozważasz ... ale nie dla Flexboksa .

Na koniec powtórzę główne pytanie:

Dlaczego nie ma właściwości „justify-items” i „justify-self”?

Metody wyrównywania elementów Flex wzdłuż głównej osi

Jak stwierdzono w pytaniu:

Aby wyrównać elementy elastyczne wzdłuż głównej osi, istnieje jedna właściwość: justify-content

Aby wyrównać Flex elementów wzdłuż osi przekroju istnieją trzy właściwości: align-content, align-itemsialign-self .

Pytanie brzmi:

Dlaczego nie ma justify-itemsi justify-selfwłaściwości?

Jedna odpowiedź może brzmieć: ponieważ nie są one konieczne.

Specyfikacja Flexbox zapewnia dwie metody wyrównywania elementów elastycznych wzdłuż głównej osi:

1. Właściwość justify-contentsłowa kluczowego oraz
2. auto marginesy

justify-content

W justify-contentwyrównuje własności wyginają przedmiotów wzdłuż głównej osi elastycznego pojemnika.

Jest nakładany na elastyczny pojemnik, ale wpływa tylko na elastyczne przedmioty.

Istnieje pięć opcji wyrównania:

• flex-start ~ Przedmioty Flex są pakowane na początku linii.

  

• flex-end ~ Przedmioty Flex są pakowane pod koniec linii.

  

• center ~ Przedmioty Flex są pakowane w kierunku środka linii.

  

• space-between~ Elementy elastyczne są równomiernie rozmieszczone, przy czym pierwszy element jest wyrównany do jednej krawędzi pojemnika, a ostatni element do przeciwległej krawędzi. Krawędzie używane przez pierwszych i ostatnich pozycji zależy flex-directioni trybu zapisu ( ltrlub rtl).

  

• space-around~ To samo, co space-betweenz wyjątkiem pół-wielkości spacji na obu końcach.

  

Automatyczne marginesy

Dzięki automarginesom elementy elastyczne mogą być wyśrodkowane, oddalone lub spakowane w podgrupy.

W przeciwieństwie do tego justify-content, który jest stosowany do kontenera elastycznego, automarginesy idą na elementach elastycznych.

Działają, zużywając całą wolną przestrzeń w określonym kierunku.

Dopasuj grupę elementów elastycznych do prawej, a pierwszą pozycję do lewej

Scenariusz z pytania:

• tworzenie grupy elementów elastycznych wyrównywanie do prawej ( justify-content: flex-end), ale pierwszy element wyrównywanie do lewej ( justify-self: flex-start)

  Rozważ sekcję nagłówka z grupą elementów nawigacyjnych i logo. Dzięki justify-selflogo można wyrównać w lewo, podczas gdy elementy nawigacyjne pozostają daleko w prawo, a całość płynnie dostosowuje się („wygina”) do różnych rozmiarów ekranu.

Inne przydatne scenariusze:

Umieść element elastyczny w rogu

Scenariusz z pytania:

• umieszczenie elementu elastycznego w rogu .box { align-self: flex-end; justify-self: flex-end; }

Wyśrodkuj element flex w pionie i poziomie

margin: autojest alternatywą dla justify-content: centeri align-items: center.

Zamiast tego kodu na kontenerze Flex:

.container {
    justify-content: center;
    align-items: center;
}

Możesz użyć tego na elemencie flex:

.box56 {
    margin: auto;
}

Ta alternatywa jest przydatna podczas centrowania elementu elastycznego, który przepełnia pojemnik .

Wyśrodkuj element flex i wyśrodkuj drugi element flex między pierwszym a krawędzią

Elastyczny pojemnik wyrównuje elastyczne przedmioty, rozdzielając wolne miejsce.

Dlatego, aby uzyskać równą równowagę , aby środkowy element mógł być wyśrodkowany w pojemniku z jednym elementem obok, należy wprowadzić przeciwwagę.

W poniższych przykładach wprowadzono niewidoczne trzecie elementy elastyczne (pola 61 i 68) w celu zrównoważenia „rzeczywistych” przedmiotów (pola 63 i 66).

Oczywiście ta metoda nie jest świetna pod względem semantyki.

Alternatywnie możesz użyć pseudoelementu zamiast rzeczywistego elementu DOM. Lub możesz użyć pozycjonowania bezwzględnego. Omówiono tutaj wszystkie trzy metody: elementy Flex wyśrodkowane i wyrównane do dołu

UWAGA: Powyższe przykłady będą działać - pod względem prawdziwego centrowania - tylko wtedy, gdy najbardziej zewnętrzne elementy mają równą wysokość / szerokość. Gdy elementy elastyczne mają różne długości, zobacz następny przykład.

Wyśrodkuj element elastyczny, gdy sąsiednie elementy różnią się rozmiarem

Scenariusz z pytania:

• w rzędzie trzech elastycznych elementów przymocuj środkowy element do środka pojemnika ( justify-content: center) i wyrównaj sąsiednie przedmioty do krawędzi pojemnika ( justify-self: flex-starti justify-self: flex-end).

  Uwaga: wartości space-around i space-betweenna justify-contentnieruchomości nie będzie utrzymywać pozycję środkową centralnie w stosunku do pojemnika, jeśli sąsiednie elementy mają różne szerokości ( patrz demo ).

Jak wspomniano, chyba że wszystkie elementy Flex mają równą szerokość lub wysokość (w zależności od flex-direction), środkowy element nie może być naprawdę wyśrodkowany. Ten problem jest silnym argumentem za justify-selfwłaściwością (oczywiście zaprojektowaną do obsługi zadania).

#container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}
.box {
  height: 50px;
  width: 75px;
  background-color: springgreen;
}
.box1 {
  width: 100px;
}
.box3 {
  width: 200px;
}
#center {
  text-align: center;
  margin-bottom: 5px;
}
#center > span {
  background-color: aqua;
  padding: 2px;
}

<div id="center">
  <span>TRUE CENTER</span>
</div>

<div id="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>

<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>

Oto dwie metody rozwiązania tego problemu:

Rozwiązanie nr 1: Absolutne pozycjonowanie

Specyfikacja Flexbox pozwala na absolutne pozycjonowanie elementów flex . Dzięki temu środkowy element może być idealnie wyśrodkowany, niezależnie od wielkości rodzeństwa.

Pamiętaj tylko, że podobnie jak wszystkie absolutnie ustawione elementy, elementy są usuwane z dokumentów . Oznacza to, że nie zajmują miejsca w pojemniku i mogą zachodzić na swoje rodzeństwo.

W poniższych przykładach środkowy element jest wyśrodkowany z absolutnym pozycjonowaniem, a elementy zewnętrzne pozostają w ruchu. Ale ten sam układ można osiągnąć odwrotnie: Wyśrodkuj środkowy element justify-content: centeri absolutnie ustaw zewnętrzne elementy.

Rozwiązanie nr 2: Zagnieżdżone kontenery Flex (bez absolutnego pozycjonowania)

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}

<div class="container">
  <div class="box box71"><span>71 short</span></div>
  <div class="box box72"><span>72 centered</span></div>
  <div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>

Oto jak to działa:

• Div najwyższego poziomu (.container ) to elastyczny kontener.
• Każde dziecko div (.box ) jest teraz elementem elastycznym.
• Każdy .boxprzedmiot jest podanyflex: 1 w celu równego podziału miejsca w pojemniku.
• Teraz przedmioty zajmują całe miejsce w rzędzie i mają równą szerokość.
• Ustaw każdy element jako (zagnieżdżony) elastyczny pojemnik i dodaj justify-content: center .
• Teraz każdy span element jest wyśrodkowanym elementem elastycznym.
• Użyj automarginesów elastycznych, aby przesunąć zewnętrzne spanlewe i prawe.

Możesz także zrezygnować justify-contenti użyćauto wyłącznie marginesów.

Ale justify-contentmoże tu działać, ponieważ automarginesy zawsze mają priorytet. Ze specyfikacji:

8.1 Wyrównanie do auto marginesów

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

justify-content: space-same (koncepcja)

Wracając do justify-contentminuty, oto pomysł na jeszcze jedną opcję.

• space-same~ Hybryda space-betweeni space-around. Elementy elastyczne są równomiernie rozmieszczone (jak space-between), z tym wyjątkiem, że na obu końcach (jak space-around) zamiast pół-wielkości znajdują się spacje na obu końcach.

Układ ten można osiągnąć ::beforei ::afterpseudo-elementów na giętkim opakowaniu.

^{(kredyt: @oriol dla kodu i @crl dla etykiety)}

AKTUALIZACJA: Przeglądarki rozpoczęły wdrażanie space-evenly, które spełnia powyższe wymagania. Zobacz ten post, aby uzyskać szczegółowe informacje: Równa przestrzeń między elementami elastycznymi

PLAC ZABAW (zawiera kod dla wszystkich powyższych przykładów)

Wiem, że to nie jest odpowiedź, ale chciałbym przyczynić się do tej sprawy za to, co jest warte. Byłoby wspaniale, gdyby mogli wypuścić justify-selfFlexbox, aby uczynić go naprawdę elastycznym.

Uważam, że gdy na osi znajduje się wiele elementów, najbardziej logicznym sposobem justify-selfzachowania jest wyrównanie się do najbliższych sąsiadów (lub krawędzi), jak pokazano poniżej.

Mam nadzieję, że W3C to zauważy i przynajmniej to rozważy. =)

W ten sposób możesz mieć przedmiot, który jest naprawdę wyśrodkowany, niezależnie od wielkości lewego i prawego pudełka. Kiedy jedno z pudeł dotrze do punktu środkowego pudełka, po prostu je popchnie, aż nie będzie już miejsca do rozdzielenia.

Łatwość tworzenia niesamowitych układów jest nieograniczona, spójrz na ten „złożony” przykład.

Zapytano o to na liście w stylu www, a Tab Atkins (edytor specyfikacji) udzielił odpowiedzi wyjaśniającej dlaczego . Opowiem o tym trochę tutaj.

Na początek załóżmy, że nasz elastyczny pojemnik jest jednokreskowy (flex-wrap: nowrap ). W tym przypadku istnieje wyraźna różnica w wyrównaniu między osią główną i osią poprzeczną - na osi głównej znajduje się wiele elementów, ale tylko jeden element jest ułożony na osi poprzecznej. Dlatego sensowne jest posiadanie „align-self” z możliwością dostosowywania dla każdego elementu w osi poprzecznej (ponieważ każdy element jest wyrównywany osobno), podczas gdy nie ma to sensu w głównej osi (ponieważ tam elementy są wyrównywane zbiorowo).

W przypadku wieloliniowego flexboksa ta sama logika ma zastosowanie do każdej „linii flex”. W danym wierszu elementy są wyrównywane indywidualnie w osi poprzecznej (ponieważ jest tylko jeden element w wierszu, w osi poprzecznej), a kolektywnie w osi głównej.

Oto kolejny sposób frazowania go: tak, wszystko z *-selfi *-contentwłaściwości są o tym, jak rozpowszechniać dodatkową przestrzeń wokół rzeczy. Ale kluczową różnicą jest to, że *-selfwersje są przeznaczone dla przypadków, w których na tej osi jest tylko jedna rzecz , a *-contentwersje są, gdy istnieje potencjalnie wiele rzeczy na tej osi . Scenariusze „jedna rzecz kontra wiele rzeczy” to różne rodzaje problemów, więc mają różne rodzaje dostępnych opcji - na przykład wartości space-around/ space-betweenmają sens *-content, ale nie dla*-self .

SO: W głównej osi Flexboksa istnieje wiele rzeczy do rozłożenia wokół. Więc *-contentwłasności sens tam, ale nie*-self właściwość.

Natomiast w osi poprzecznej mamy zarówno właściwość *-selfa, jak i *-contentwłaściwość. Jeden określa, w jaki sposób rozdzielimy przestrzeń wokół wielu linii elastycznych ( align-content), a drugi ( align-self) określa, jak rozmieścić przestrzeń wokół poszczególnych osób elementów wygięcia w osi poprzecznej, w obrębie danej linii wygięcia.

(Ignoruję *-itemstutaj właściwości, ponieważ po prostu ustalają wartości domyślne *-self).

Wiem, że nie używa Flexboksa, ale w przypadku prostego przypadku użycia trzech elementów (jeden po lewej, jeden w środku, jeden po prawej), można to łatwo zrobić display: gridna rodzicu, grid-area: 1/1/1/1;na dzieciach i justify-selfdo pozycjonowania tych dzieci.

<div style="border: 1px solid red; display: grid; width: 100px; height: 25px;">
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: left;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: center;"></div>
  <div style="border: 1px solid blue; width: 25px; grid-area: 1/1/1/1; justify-self: right;"></div>
</div>

Właśnie znalazłem własne rozwiązanie tego problemu, a przynajmniej mojego problemu.
Użyłem justify-content: space-aroundzamiastjustify-content: space-between; .

W ten sposób elementy końcowe zostaną przyklejone do góry i dołu, a Ty możesz mieć niestandardowe marginesy, jeśli chcesz.