CSS align-content property

Definisjon og bruk

align-content egenskapen endrer flex-wrap oppførselen til egenskapen. Det er sammenlignbart med align-items Lignende, men det justerer ikke elastiske objekter, men elastiske linjer.

Bemerk:Det må være flere rader av objekter for at denne egenskapen skal fungere!

Tips:Bruk justify-content Egenskapen kan justere objekter horisontalt på hovedaksen (main-axis).

Se også:

CSS Tutorial:CSS Flexbox

CSS Tutorial:CSS Grid

CSS Referansehåndbok:align-items-egenskapen

CSS Referansehåndbok:align-self-egenskapen

CSS Referansehåndbok:justify-content-egenskapen

HTML DOM Referansehåndbok:alignContent-egenskapen

Eksempel

Pakk radene til midten av elastisk beholder:

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

Prøv det selv

CSS Syntax

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

Egenskapsverdi

Verdi Beskrivelse
stretch Standardverdi. Rader strekkes for å fylle ut resten av plassen.
center Pakker rader mot midten av elastisk beholder.
flex-start Pakker rader mot starten av elastisk beholder.
flex-end Pakker rader mot slutten av elastisk beholder.
space-between Rader plasseres jevnt i elastisk beholder.
space-around Rader plasseres jevnt i elastisk beholder, med halvdel på hver ende.
initial Sett denne egenskapen til standardverdien. Se også initial.
inherit Arv denne egenskapen fra foreldreelementet. Se også inherit.

Tekniske detaljer

Standardverdi: stretch
Arv: Nei
Animering: Ikke støttet. Se også:Animasjonsrelaterte egenskaper.
Versjon: CSS3
JavaScript syntaks: object.style.alignContent="center"

Nettleserstøtte

Tallene i tabellen angiver den første nettleseren som fullt ut støtter egenskapen.

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