Jaka jest różnica między align-content a align-items?

Czy ktoś może mi pokazać różnicę między align-itemsi align-content?

align-itemsWłasnością giętkiego polu wyrównuje elementy wewnątrz kontenera flex przekroju wzdłuż osi, tak jak justify-contentrobi się wzdłuż osi głównej. (Domyślnie flex-direction: rowoś poprzeczna odpowiada pionowi, a oś główna odpowiada poziomemu. Z flex-direction: columntymi dwoma są odpowiednio zamienione).

Oto przykład, jak align-items:centerwygląda:

Ale align-contentjest dla elastycznych pudełek z wieloma liniami. Nie działa, gdy przedmioty są w jednej linii. Wyrównuje całą strukturę zgodnie z jej wartością. Oto przykład align-content: space-around;:

A oto jak align-content: space-around;z align-items:centerwyglądem:

Zwróć uwagę na trzecie pole i wszystkie pozostałe pola w pierwszym wierszu zmieniają się na pionowo wyśrodkowane w tym wierszu.

Oto kilka linków codepen do zabawy:

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

Oto super fajne pióro, które pokazuje i pozwala grać z prawie wszystkim w Flexbox.

Uważam, że przykład http://flexboxfroggy.com/ jest bardzo przydatny.

Zajmie ci to 10–20 minut, a na poziomie 21 znajdziesz odpowiedź na swoje pytanie. Wspomniał:

align-content określa odstępy między liniami, a align-items określa, w jaki sposób elementy jako całość są wyrównane w kontenerze. Gdy jest tylko jedna linia, wyrównanie zawartości nie ma żadnego efektu

Po pierwsze, align-itemsdotyczy przedmiotów w jednym rzędzie. Tak więc dla pojedynczego rzędu elementów na głównej osi , align-itemswyrównasz te elementy odpowiednio względem siebie i zacznie się od nowej perspektywy z następnego rzędu.

Teraz align-contentnie koliduje z przedmiotami z rzędu, ale z samymi wierszami . W związku z tym,align-content spróbuje wyrównać rzędy względem siebie i zgiąć pojemnik.

Sprawdź to skrzypce: https://jsfiddle.net/htym5zkn/8/

Miałem to samo zamieszanie. Po pewnym majsterkowaniu na podstawie wielu powyższych odpowiedzi, w końcu widzę różnice. Moim skromnym zdaniem to wyróżnienie najlepiej widać w przypadku elastycznego pojemnika, który spełnia następujące dwa warunki:

1. Sam elastyczny pojemnik ma ograniczenie wysokości (np. min-height: 60rem) I dlatego może stać się zbyt wysoki dla swojej zawartości
2. Przedmioty dziecięce zamknięte w pojemniku mają nierówne wysokości

Warunek 1 pomaga mi zrozumieć, co contentoznacza w stosunku do kontenera nadrzędnego. Gdy zawartość zrówna się z kontenerem, nie będziemy mogli zobaczyć żadnych efektów pozycjonowania align-content. Dopiero gdy mamy dodatkową przestrzeń wzdłuż osi poprzecznej, zaczynamy widzieć jej efekt: wyrównuje zawartość względem granic kontenera nadrzędnego.

Warunek 2 pomaga mi wizualizować efekty align-items: wyrównuje elementy względem siebie.

Oto przykład kodu. Surowce pochodzą z samouczka Wes Bos CSS Grid (21. Flexbox vs. CSS Grid)

• Przykładowy HTML:

  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">💩</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>

• Przykład CSS:

.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

Przykład 1 : Zawęź obszar wyświetlania, aby zawartość była równo z kontenerem. Dzieje się tak, gdy align-content: flex-start;nie ma żadnych efektów, ponieważ cały blok zawartości jest ściśle dopasowany do pojemnika (brak dodatkowego miejsca na zmianę położenia!)

Zwróć także uwagę na drugi rząd - zobacz, jak elementy są wyśrodkowane względem siebie.

Przykład 2 : Gdy poszerzamy obszar wyświetlania, nie mamy już wystarczającej zawartości, aby wypełnić cały pojemnik. Teraz zaczynamy widzieć efekty align-content: flex-start;--it wyrównuje zawartość względem górnej krawędzi kontenera.

Te przykłady oparte są na Flexboksie, ale te same zasady dotyczą siatki CSS. Mam nadzieję że to pomoże :)

Sprawdziłem je w przeglądarce.

align-content może zmienić wysokość linii dla kierunku wiersza lub szerokość kolumny, gdy jej wartość jest rozciągnięta, lub dodać puste miejsce między liniami lub wokół nich dla space-between , space-around, flex-start, flex-end values.

align-itemsmoże zmienić wysokość lub pozycję elementów w obszarze linii. Gdy przedmioty nie są zawinięte, mają tylko jedną linię, której obszar jest zawsze rozciągnięty do obszaru pola elastycznego (nawet jeśli elementy się przepełniają) i align-contentnie ma wpływu na pojedynczą linię. Nie ma to więc wpływu na przedmioty, które nie są zawinięte i align-itemsmogą jedynie zmieniać ich położenie lub rozciągać je, gdy wszystkie znajdują się w jednej linii.

Jeśli jednak są owinięte, w każdej linii znajduje się wiele wierszy i przedmiotów. A jeśli wszystkie elementy każdej linii mają tę samą wysokość (dla kierunku wiersza), wysokość linii będzie równa wysokości tych elementów i nie zobaczysz żadnego efektu po zmianiealign-items wartości .

Jeśli więc chcesz wpłynąć na elementy, align-itemskiedy elementy są owinięte i mają tę samą wysokość (dla kierunku wiersza), najpierw musisz użyć align-contentwartości rozciągania, aby powiększyć obszar linii.

wyrównaj zawartość

align-contentkontroluje pozycję osi poprzecznej (tj. kierunek pionowy, jeśli flex-directionjest row, i poziomą, jeśli flex-directionjest column), pozycjonowanie wielokrotności linii względem siebie.

(Pomyśl o liniach akapitu rozłożonego pionowo, ułożonych w górę, ułożonych w dół. Jest to flex-directionparadygmat rzędu).

wyrównaj elementy

align-items kontroluje oś poprzeczną pojedynczej linii elementów giętkich.

(Pomyśl, w jaki sposób wyrównana jest pojedyncza linia akapitu, jeśli zawiera ona trochę normalnego tekstu i jakiś wyższy tekst, taki jak równania matematyczne. W takim przypadku będzie to dolna, górna lub środkowa część każdego rodzaju tekstu w linii, która będzie być wyrównany?)

Czego nauczyłem się z każdej odpowiedzi i odwiedzając blog

jaka jest oś poprzeczna i główna oś

• oś główna jest rzędem poziomym, a oś poprzeczna jest kolumną pionową - dla flex-direction: row
• oś główna to kolumna pionowa, a oś poprzeczna to rząd poziomy - dla flex-direction: column

Teraz wyrównaj zawartość i wyrównaj elementy

align-content jest dla wiersza, działa, jeśli kontener ma (więcej niż jeden wiersz) właściwości align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-items jest dla pozycji w wierszu Właściwości align-pozycji

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Więcej informacji na temat wizyty w flex

Główna różnica polega na tym, że wysokość elementów nie jest taka sama! Następnie możesz zobaczyć, jak w wierszu wszystkie są na środku \ end \ start

zgodnie z tym, co rozumiałem stąd :

podczas korzystania z elementu wyrównywania lub justowania element dopasowuje „zawartość wewnątrz elementu siatki odpowiednio wzdłuż osi kolumny lub osi wiersza.

Ale: jeśli używasz align-content lub justify-content, ustawiasz pozycję siatki wzdłuż osi kolumny lub osi wiersza. pojawia się, gdy masz siatkę w większym pojemniku, a szerokość lub wysokość są nieelastyczne (przy użyciu px).