Propriété place-content

La propriété place-content définit l'alignement des éléments sur les axes principal et transversal pour les éléments flex, et sur les axes horizontal et vertical pour les grilles. La première valeur spécifie l'alignement sur l'axe principal (horizontal), la deuxième valeur - sur l'axe transversal (vertical). La propriété s'applique à l'élément parent.

Syntaxe

csssélecteur {
  place-content: axe_principal axe_transversal;
}

Exemple . Alignement au début de l'axe principal et au centre de l'axe transversal

Maintenant, les éléments sont collés à la partie supérieure de l'axe principal et se trouvent simultanément au centre de l'axe transversal :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: start center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Exemple . Alignement au centre de l'axe principal et à la fin de l'axe transversal

Et maintenant, les éléments sont positionnés au centre de l'axe principal et à la fin de l'axe transversal :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: center end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Exemple . Alignement à la fin de l'axe principal et au début de l'axe transversal

Ici, les éléments sont collés à la partie inférieure de l'axe principal et simultanément au début de l'axe transversal :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: end start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Exemple . Alignement au début de l'axe vertical et à la fin de l'axe horizontal dans une grille

Alignons nos éléments au début de l'axe vertical et à la fin de l'axe horizontal :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: start end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Exemple . Alignement au centre de l'axe vertical et au début de l'axe horizontal dans une grille

Alignons nos éléments au centre de l'axe vertical et au début de l'axe horizontal :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: center start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Exemple . Alignement à la fin de l'axe vertical et au début de l'axe horizontal dans une grille

Alignons nos éléments à la fin de l'axe vertical et au début de l'axe horizontal :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: end start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Voir aussi