Dlaczego w CSS Flexbox nie ma właściwości" justify-items "I" justify-self"?

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

Jak wskazano w pytaniu:

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

Aby wyrównać elementy flex wzdłuż osi poprzecznej są trzy właściwości: align-content, align-items oraz align-self.

Pytanie zadaje:

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

Jedna odpowiedź może być: Ponieważ nie są konieczne.

Specyfikacja flexbox zawiera dwie metody wyrównywania elementów flex wzdłuż głównej osi:

1. właściwość słowa kluczowego justify-content oraz
2. auto marginesy

Justify-content

The justify-content właściwość wyrównuje elementy flex wzdłuż głównej osi kontenera flex.

Jest stosowany do pojemnika flex, ale dotyczy tylko elementów flex.

Istnieje pięć opcji wyrównania:

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

  

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

  

• center ~ Elementy Flex są pakowane w kierunku środka Kolejka

  

• space-between ~ Elementy Flex są równomiernie rozmieszczone, przy czym pierwszy element jest wyrównany do jednej krawędzi kontenera, a ostatni do przeciwległej krawędzi. Krawędzie używane przez pierwszy i ostatni element zależą od flex-direction i tryb zapisu (ltr lub rtl).

  

• space-around ~ tak samo jak space-between, z wyjątkiem spacji półwymiarowych na obu koniec.

  

Marginesy Automatyczne

Z auto marginesy , elementy flex mogą być wyśrodkowane, odstępowane lub pakowane w podgrupy.

W przeciwieństwie do justify-content, które jest stosowane do kontenera flex, auto marginesy znajdują się na elementach flex.

Pracują, pochłaniając całą wolną przestrzeń w określonym kierunku.

Align Grupa elementów flex w prawo, ale pierwszy element w lewo

Scenariusz z pytanie:

• Tworzenie grupy elementów flex align-right (justify-content: flex-end) / align = "left" / (justify-self: flex-start)

  rozważ sekcję nagłówka z grupą elementów nawigacyjnych i logo. Z justify-self logo może być wyrównane w lewo, podczas gdy elementy nawigacyjne pozostają prawej, a całość dopasowuje się płynnie ("flexes") do różne rozmiary ekranu.

inne przydatne scenariusze:

Umieść element flex w rogu

Scenariusz z pytania:

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

Center element flex pionowo i poziomo

margin: auto jest alternatywą dla justify-content: center i align-items: center.

Zamiast tego kodu na kontenerze flex:

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

.box56 {
    margin: auto;
}

Ta alternatywa jest przydatna, gdy centrowanie elementu flex, który przepełnia Pojemnik.

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

A kontener flex wyrównuje elementy flex poprzez dystrybucję wolnego miejsca.

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

W poniższych przykładach wprowadzono niewidoczne elementy trzeciego flexu (pola 61 i 68), aby zrównoważyć "rzeczywiste" elementy (pola 63 i 66).

Oczywiście ta metoda jest nic wielkiego pod względem semantyki.

Alternatywnie można użyć pseudo-elementu zamiast rzeczywistego elementu DOM. Możesz też użyć pozycjonowania absolutnego. Omówiono tutaj wszystkie trzy metody: / align = "left" / Linear

uwaga: powyższe przykłady będą działać – pod względem rzeczywistego centrowania-tylko wtedy, gdy najbardziej oddalone elementy mają równą wysokość/szerokość. Gdy elementy flex mają różne długości, Zobacz następny przykład.

Center a flex element, gdy sąsiadujące elementy różnią się rozmiarem [196]}

Scenariusz z pytania:

• W rzędzie trzech elementów flex, umieść środkowy element na środku kontenera (justify-content: center) i wyrównaj sąsiadujące elementów do krawędzi pojemnika (justify-self: flex-start i justify-self: flex-end).

  zauważ, że wartości space-around i space-between we właściwości justify-content nie utrzymają środkowego elementu wyśrodkowanego względem kontenera, jeśli sąsiednie elementy mają różne szerokości (zobacz demo).

Jak zauważono, chyba że wszystkie elementy flex mają jednakową szerokość lub wysokość (w zależności od flex-direction), element środkowy nie może być naprawdę wyśrodkowany. Ten problem stanowi mocny argument dla właściwości justify-self (zaprojektowanej do obsługi zadania, oczywiście).

#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 # 1: Absolutne Pozycjonowanie

Flexbox spec pozwala dla absolutnego pozycjonowania elementów flex . Pozwala to na idealne wyśrodkowanie środkowego elementu niezależnie od wielkości jego rodzeństwa.

Należy pamiętać, że podobnie jak wszystkie absolutnie pozycjonowane elementy, elementy są usuwane z obiegu dokumentów. Oznacza to, że nie zajmują miejsca w pojemniku i mogą nakładać się na rodzeństwo.

W poniższych przykładach środkowy element jest wyśrodkowany z absolutnym pozycjonowaniem, a zewnętrzne elementy pozostają w przepływie. Ale ten sam układ można osiągnąć w sposób odwrotny: Wyśrodkuj środkowy element za pomocą justify-content: center i absolutnie Ustaw zewnętrzne elementy.

Rozwiązanie # 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:

• top-level div (.container) jest kontenerem flex.
• każdy potomek div (.box) jest teraz elementem flex.
• każdy .box element jest podana flex: 1 w celu równomiernego rozłożenia przestrzeni pojemnika.
• Teraz elementy zajmują całą przestrzeń w wierszu i mają równą szerokość.
• Uczyń każdy element (zagnieżdżonym) elastycznym kontenerem i dodaj justify-content: center.
• teraz każdy element span jest wyśrodkowanym elementem flex.
• użyj marginesów flex auto, aby przesunąć zewnętrzne span W lewo i w prawo.

Można również zrezygnować justify-content i używać auto marginesów wyłącznie.

Ale justify-content może tu pracować, ponieważ auto marże zawsze mają priorytet. Od spec:

8.1. / Align = "left" / ]} marginesy

Przed wyrównaniem przez justify-content i align-self, wszelkie dodatnia wolna przestrzeń jest dystrybuowana do marginesów automatycznych w tym wymiarze.

Justify-content: space-same (concept)

Powrót do justify-content na chwilę, oto pomysł na jeszcze jedną opcję.

• space-same ~ hybryda z space-between i space-around. Elementy Flex są równomiernie rozmieszczone (np. space-between), z tym, że zamiast spacji o połowie wielkości na obu końcach (np. space-around), na obu końcach znajdują się spacje o pełnym rozmiarze.

Ten układ można osiągnąć za pomocą ::before oraz ::after pseudoelementy na kontenerze flex.

^{(kredyt: @oriol za kod i @crl za Etykietę)}

Aktualizacja: Przeglądarki rozpoczęły wdrażanie space-evenly, który spełnia powyższe. Zobacz ten post po szczegóły: równa przestrzeń między elementami flex

Plac zabaw (zawiera kod dla wszystkich przykładów powyżej)