Atrybut align-content CSS

Definicja i użycie

align-content zmiana atrybutu atrybutu flex-wrap Zachowanie atrybutu. Jest podobny do align-items Podobny, ale zamiast wyścigić elementy elastyczne, wyściguje linie elastyczne.

Uwaga:Właściwość działa tylko, gdy jest wiele wierszy!

Wskazówka:Użyj justify-content Atrybut może poziomo wyścigić elementy na głównej osi (main-axis).

Zobacz również:

Kurs CSS:Flexbox w CSS

Kurs CSS:CSS Grid

Podręcznik CSS:Atrybut align-items

Podręcznik CSS:Atrybut align-self

Podręcznik CSS:Atrybut justify-content

Podręcznik HTML DOM:Atrybut alignContent

Przykład

Packuje wiersze do środka kontenera elastycznego:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Spróbuj sam!

CSS Syntax

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Wartość atrybutu

Wartość Opis
stretch Domyślna wartość. Wiersze rozciągają się, aby zająć pozostałą przestrzeń.
center Packuje wiersze w stronę środka kontenera elastycznego.
flex-start Packuje wiersze w stronę początku kontenera elastycznego.
flex-end Packuje wiersze w stronę końca kontenera elastycznego.
space-between Wiersze są równomiernie rozmieszczone w kontenerze elastycznym.
space-around Wiersze są równomiernie rozmieszczone w kontenerze elastycznym, z każdym końcem zajmując połową.
initial Ustawia tę właściwość na jej wartość domyślną. Zobacz initial.
inherit Przekazuje tę właściwość od elementu nadrzędnego. Zobacz inherit.

Szczegóły techniczne

Domyślna wartość: stretch
Inherytacja: Nie
Tworzenie animacji: Nieobsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
JavaScript Syntax: object.style.alignContent="center"

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0