CSS justify-content egenskab

Definition og brug

justify-content egenskab (vandret) justerer elementerne i en fleksibel beholder, når elementerne ikke optager al den tilgængelige plads på hovedaksen.

Tip:Brug align-items egenskab Juster egenskaberne for at oprette en lodret justering af elementerne.

Se også:

CSS undervisning:CSS flexbox

CSS undervisning:CSS Grid

CSS 参考手册：align-content egenskab

CSS 参考手册：align-items egenskab

CSS 参考手册：CSS referencehåndbog:

align-self egenskabHTML DOM referencehåndbog:

justify-content: space-between;

justifyContent egenskab

Vis med mellemrum de elastiske elementer før, mellem og efter rækker:
  div {
  Juster elastiske elementer i midten af beholderen:
justify-content: space-around;

}

justify-content: center;

Flere TIY-eksempler kan findes nedenfor på siden.

CSS syntaks

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

Egenskabsværdi Værdi
Standardværdi: Beskrivelse
Standardværdi. Elementerne er placeret ved begyndelsen af beholderen. flex-end
Elementerne er placeret ved enden af beholderen. center
Elementerne er placeret i midten af beholderen. space-between
Elementerne har mellemrum mellem rækkerne. space-around
Sæt denne egenskab til dens standardværdi. Se: Elementerne efterlader plads før, mellem og efter rækkerne. Sæt denne egenskab til dens standardværdi. Se:Animation-related properties
Arv denne egenskab fra forældrelementet. Se: initial Arv denne egenskab fra forældrelementet. Se:Animation-related properties

inherit

Tekniske detaljer Standardværdi:
flex-start Arv:
Nej Animation production:Ikke understøttet. Se:Animation-related properties
。 Version:
CSS3 JavaScript syntaks:

object.style.justifyContent="space-between"

justify-content: space-between;

Flere eksempler

Vis med mellemrum de elastiske elementer før, mellem og efter rækker:
  div {
  Juster elastiske elementer ved begyndelsen af beholderen (standard):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Vis med mellemrum de elastiske elementer før, mellem og efter rækker:
  div {
  Juster elastiske elementer ved enden af beholderen:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Vis med mellemrum de elastiske elementer før, mellem og efter rækker:
  div {
  Vis med mellemrum de elastiske elementer mellem rækkerne:
justify-content: space-around;

}

justify-content: space-between;

Eksempel

Vis med mellemrum de elastiske elementer før, mellem og efter rækker:
  div {
  display: flex;
justify-content: space-around;

}

Prøv det selv

Browserunderstøttelse

Tabelen viser den første browserversion, der fuldt ud understøtter egenskaben, med præfikset -webkit- eller -moz-.

egenskab Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0